CSS Grid 网格布局全解析

grid-column-start
grid-column-end
grid-row-start
grid-row-end

前两个属性对应于垂直网格线，也就是列网格线的开始和结束。 最后两个属性是指水平网格线，也就是行网格线的开始和结束。 让我们分配正确的网格线编号来移动第 6 个框。

.box:nth-child(6)
{
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 3;
}

还有两个简写属性用于将行和列的开始网格线和结束网格线设置在一起。

.box:nth-child(6)
{
grid-row: 1 / 2;
grid-column: 2 / 3;
}

此外，还有一个

grid-area

现在我们的例子可以写成这样

.box:nth-child(6)
{
grid-area: 1 / 2 / 2 / 3;
}

上面的代码行也可以进一步减少。正如您所看到的，这个框只占用一行和一个列，所以我们只需要指定行和列的起始线，而无需结束线的值

.box:nth-child(6)
{
grid-area: 1 / 2;
}

如果我们想要第6个框跨越两个框的区域呢？ 这很容易通过将

column-end

.box:nth-child(6)
{
grid-area: 1 / 2 / 2 / 4;
}

您也可以使用

span

grid-row-end

grid-column-end

.box:nth-child(6)
{
grid-area: 1 / 2 / 2 / span 2;
}

网格区域命名

grid-area

grid-template-areas