如何在三列CSS网格布局中插入全宽元素？

Question

我有父母：

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

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

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

我知道如何使用浮点数做到这一点，但是我正努力与CSS Grid保持联系。

Answer 1

是的，就像其他人提到的那样，您可以使用：

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

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

在容器上填充网格中的空白。

Answer 2

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

Answer 3

您可以在网格中设置单元格的起点和终点。

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