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

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>

我如何使它们不重叠？当共享相同的行和列时，可能表现得像弹性项目。（不制作外容器）。

Answer 1

将物品包裹在容器中。

例子：

.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>