css3网格布局详解 |css搜索关键字变色

网格布局由网格容器、行、列、网格线、单元格等组成。

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
.box {
background-color: #000080;
color: #fff;
padding: 10px;
}

在上面的代码中，大家首先定义了一个名为.container的类，它是网格容器。然后大家使用display: grid将其定义为网格布局。接着使用grid-template-columns定义了三个相同宽度的列，使用grid-template-rows定义了两个相同高度的行。

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
}

使用repeat()函数，大家可以更方便地定义重复的网格线。上面的代码与之前的代码是等效的。

接下来，大家可以在网格容器中创建网格单元格，可以使用grid-column-start、grid-column-end、grid-row-start、grid-row-end属性来定义它们在行列中的位置。

.box1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
}

上面的代码中，大家定义了一个名为.box1的类，并将它的起始列设置为1、结束列设置为2、起始行设置为1、结束行设置为3。

除了使用数字定义位置之外，大家也可以使用关键词来定义位置，如使用span属性来指定单元格的跨列和跨行数量。

.box2 {
grid-column: 2 span 2;
grid-row: 1 / 3;
}

上面的代码中，大家定义了一个名为.box2的类，并将它的起始列设置为2，跨2列，起始行设置为1，结束行设置为3。

最后，大家还可以使用grid-area属性来同时设置四个位置属性，还可以使用命名网格来定义单元格的位置。

.box3 {
grid-area: header;
}

上面的代码中，大家定义了一个名为.box3的类，并将它的位置设置为网格中的header区域。

CSS3网格布局是一种灵活且具有很强的排版能力的网页布局方式，对于需要响应式和自适应布局的网页设计非常有用。