CSS Grid 布局 是一种强大的布局系统，它允许你轻松创建复杂且响应式的布局。它使用网格系统，其中元素被放置在列和行中。
基本概念：
- 网格容器：包含网格布局的元素。
- 网格线：将网格容器划分为列和行的垂直和水平线。
- 网格单元格：网格线形成的区域。
- 网格项：放置在网格单元格中的元素。
创建网格布局：
要创建网格布局，请使用 display: grid; 属性：
.container {
display: grid;
}
定义列和行：
使用 grid-template-columns 和 grid-template-rows 属性定义网格的列和行：
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}
上面的代码定义了三列和两行。1fr 表示列或行的宽度或高度将根据可用空间按比例分配，其中列的比例为1：2：1，行的比例为1：2，具体效果可参考最下方示例。
也可根据固定值与百分比等形式进行分配：
.container {
display: grid;
grid-template-columns: 100px 20% 1fr 2fr;
grid-template-rows: 1fr 2fr;
}
上面的代码定义了四列和两行，其中第一列宽100px；第二列占总宽度的20%；第三列和第四列按照剩余宽度的1：2进行平均分配。
minmax()函数值：
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
上面的代码定义了三列，若平均分配宽度小于100px，则最后一列占100px，剩余宽度前两列平均分配，若平均分配宽度大于100px，则平均分配。
repeat()函数值：
repeat()接受两个参数，第一个参数是重复的次数，第二个参数是要重复的值。
grid-template-columns: repeat(2, 100px 20% 50px);
上面的代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为总宽度的20%，第三列和第六列为50px。
等同于以下写法：
grid-template-columns: 100px 20% 50px 100px 20% 50px;
在无法确认要重复几列时，重复次数使用关键字：auto-fill 或 auto-fit。如下所示：
.container {
grid-template-columns: repeat(auto-fill, 100px);
}
.container {
grid-template-columns: repeat(auto-fit, 100px);
}
其中auto-fill 会自动创建网格线以填充未分配的空间，而 auto-fit 不会（一般使用auto-fit）。
放置网格项：
使用 grid-column-start, grid-column-end, grid-row-start, 和 grid-row-end 属性放置网格项：
.item1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
上面的代码将 .item1 放置在从第一列到第三列、从第一行到第二行的区域中（会将gap区域一同覆盖）（参考最下方示例）。
其他属性：
CSS Grid 布局还提供了许多其他属性，用于控制网格项的对齐、间距和外观：
justify-content和align-items：控制网格项在列和行中的对齐方式。gap：设置网格项之间的间距，第一个参数为不同行之间的间距，第二个为不同列之间的间距，也可只传一个参数，将同时设置行和列之间的间距。grid-area：使用一个简短的字符串（例如，“1 / 2 / 3 / 4”）指定网格项的区域，其中参数分别为< row-start > / < column-start > / < row-end > / < column-end >。
优点：
- 灵活性和响应性：网格布局非常灵活，可以根据可用空间轻松创建响应式布局。
- 易于使用：与其他布局方法相比，网格布局的语法相对简单易懂。
- 强大的功能：网格布局提供了广泛的功能，使你可以创建复杂且多样的布局。
示例：
这是一个简单的网格布局示例，其中容器被划分为三列和两行：
<div class="container">
<div class="item1">项目 1</div>
<div class="item2">项目 2</div>
<div class="item3">项目 3</div>
<div class="item4">项目 4</div>
</div>
.container {
height: 300px;
display: grid;
grid-template-columns: 1fr 2fr 1fr; // 列按1：2：1自动分配
grid-template-rows: 1fr 2fr; // 行按1：2自动分配
gap: 10px 50px; // 第一个参数为不同行之间的间距，第二个为不同列之间的间距，也可只传一个参数，将同时设置行和列之间的间距
}
.item1 {
grid-column-start: 1;
grid-column-end: 3; // 项目1的列为索引1-3之间的区域
grid-row-start: 1;
grid-row-end: 2;// 项目1的行为索引1-2之间的区域
background: red;
}
.item2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
background: green;
}
.item3 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 3;
background: blue;
}
.item4 {
grid-column-start: 3;
grid-row-start: -1;
grid-row-end: -2;
background: yellow;
}
效果：
上面代码将创建以下布局：
其中各模块的行和列的索引值如下图所示：
一般掌握以上内容就可应对绝大部分情况。你可以根据需要调整网格布局，以创建各种不同的设计。
grid布局自动生成网站
