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

Question

我有一个父母：

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

它将其子组织成三列网格。

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

我知道如何使用浮点数来做到这一点，但我正试图掌握CSS Grid。

Answer 1

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

Answer 2

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

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