共享相同的行和列时将网格项设置为不重叠 [英] Setting grid items to not Overlap when sharing the same row and column

问题描述

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

Right now, when two grid items share the same row and column they overlap each over.

<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项目。 （不制作外部容器）。

How do I them not overlap? Probably behave like flex items when sharing the same row and column. (Without making an outer container).

推荐答案

您的语法不正确。
内联样式未使用大括号 {，}。
另外，您需要在第二列中指定项目2。如果您使用相同的行和相同的列，那么两个div肯定位于同一位置。

Your syntax is not correct. Inline styles are not using those braces "{", "}". And additionally you need to specify the "Item 2" in the second column. If you use the same row and same column then both divs are in the same place for sure.

尝试...

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个相等大小的列。

This should create a 100% width grid with 2 equally sized columns.

这篇关于共享相同的行和列时将网格项设置为不重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！