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

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

您的语法不正确。内联样式不使用那些大括号“{”、“}”。此外，您还需要在第二列中指定“元素 2”。如果您使用同一行和同一列，那么两个 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 个大小相同的列。