Question

现在，当两个网格项共享相同的行和列时，它们会重叠。

<div class="some-grid-container">
    <div style="grid-row: 1; grid-column: 1">Item 1</div>
    <div style="grid-row: 1; grid-column: 1">Item 2</div>
</div>

我怎么不重叠？共享相同的行和列时，可能表现得像flex项目。（不制作外部容器）。

Answer 1

您的语法不正确。内联样式不使用那些大括号＆＃34; {＆＃34;，＆＃34;}＆＃34;。此外，您还需要指定＆＃34;项目2＆＃34;在第二栏。如果你使用相同的行和同一列，那么两个div肯定在同一个地方。

...试

CSS：

.some-grid-container{
  display: grid;
  grid-template-columns: auto;
}

HTML：

<div class="some-grid-container">
    <div style="grid-row: 1; grid-column: 1;">Item 1</div>
    <div style="grid-row: 1; grid-column: 2;">Item 2</div>
</div>

这应该创建一个100％宽度的网格，其中包含2个大小相等的列。

Answer 2

将物品包裹在容器中。

示例：

.some-grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
}

.some-grid-container>div {
  grid-column: 1;
  grid-row: 1;
}

.some-grid-container>div>div {
  background: red;
}

<div class="some-grid-container">
  <div>
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>

共享同一行和列时，将网格项设置为不重叠

2 个答案: