如何将全角元素插入三列 CSS 网格布局?

Question

我有一个父级：

.images{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 40px;
}

将其子级组织成三列的网格。

当我单击图像时，我正在使用JS在该行的末尾插入一个容器。我希望该容器(".info-row"(跨越所有三列并且是全宽的。

我知道如何使用浮点数来做到这一点，但我正在尝试掌握 CSS 网格。

Answer 1

是的，正如其他提到的，您可以使用：

grid-column: 1 / 4;或grid-column: span 3;

元素，您可能还需要：grid-auto-flow: row dense;

以填充网格中的空白。

Answer 2

您可以在网格中设置单元格的起始行和结束行。

.info-row {
grid-column-start: 1;
grid-column-end: 4;
}

Answer 3

好的，我很快就找到了答案。在子元素上，您需要添加"网格列"属性。这允许它跨越一定数量的列。它的工作方式有点违反直觉，值对应于每列的开头或结尾。因此，对于三列跨度，属性需要为"grid-column： 1/4;"，其中第一个数字是跨度的起点，第二个数字是终点。