CSS Grid布局是一种强大的、灵活的网页布局方法，它使得我们能够以网格的形式来创建复杂的布局。它比传统的Flexbox更适合用于设计网页的整体布局，提供了更大的自由度和控制力。本文将向你介绍一些关键概念和用法，帮助你快速上手CSS Grid布局。
1. 网格容器与网格项
在使用CSS Grid布局前，我们首先需要创建一个网格容器（grid container）。通过将一个容器元素的display属性设置为grid或inline-grid，我们就可以将其转化为一个网格容器。
.container {
display: grid;
}
网格容器内的每个直接子元素都称为网格项（grid item）。通过将网格项的CSS属性设置为网格线名称或行/列的网格跨度，我们可以控制每个网格项在网格容器中的位置和尺寸。
.item {
grid-column: 1 / 3;
grid-row: 2;
}
2. 网格线与网格跨度
CSS Grid布局的核心部分是网格线（grid lines）和网格跨度（grid tracks）。网格线是指网格容器中划分网格的垂直和水平线。可以通过给网格容器设置grid-template-columns和grid-template-rows属性来指定网格线的位置和数量。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
}
上述代码将创建一个具有3列和2行的网格。每个列的宽度相等（使用1fr表示），第一行的高度为100px，第二行的高度为200px。
网格跨度则是指网格项占据的网格行和列的数量。可以通过设置网格项的grid-column和grid-row属性来指定它们的位置，使用/分隔起始和结束的网格线名称或网格跨度。
.item {
grid-column: 1 / 3;
grid-row: 2;
}
上述代码将使得.item元素占据第1列和第2列之间的所有网格，以及第2行的所有网格。
3. 网格线命名
除了使用网格线的位置指定网格项的位置外，我们还可以为网格线设置名称，并通过名称来布局网格项。通过给网格容器设置grid-template-columns和grid-template-rows属性时，可以使用方括号来为网格线命名。
.container {
display: grid;
grid-template-columns: [col1] 1fr [col2] 2fr [col3];
grid-template-rows: [row1] 100px [row2] 200px;
}
上述代码为每个列和行的起始和结束网格线设置了名称。这样我们可以通过名称来指定网格项的位置。
.item {
grid-column: col1 / col3;
grid-row: row2;
}
4. 网格自动布局
除了手动设置每个网格项的位置和大小，CSS Grid布局还提供了自动布局的能力。我们可以通过为网格容器设置grid-auto-columns和grid-auto-rows属性来指定未明确设置的网格项的默认大小。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px;
grid-auto-columns: 200px;
grid-auto-rows: 150px;
}
上述代码指定了每列的宽度为1fr，每行的高度为100px，未显式设置的网格项的宽度为200px，高度为150px。
5. 网格间隙
网格间隙（grid gap）是指网格容器中相邻网格项之间的空白间距。我们可以通过设置网格容器的grid-column-gap和grid-row-gap属性来控制这些间隔。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px;
grid-column-gap: 20px;
grid-row-gap: 10px;
}
上述代码将在每个列之间添加20px的水平间隔，在每个行之间添加10px的垂直间隔。
6. 响应式布局
CSS Grid布局非常适合用于响应式布局，即在不同屏幕大小和设备上自适应的布局。通过使用媒体查询，并在不同的屏幕宽度下改变网格模板，我们可以轻松实现响应式布局。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px;
}
@media screen and (max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 100px 100px;
}
}
上述代码将在屏幕宽度小于600px时，将网格模板改为单列，并在第二行添加一个网格项。
总结
CSS Grid布局是一种强大且灵活的网页布局技术，可以通过使用网格容器、网格项和网格线来轻松地创建复杂的布局。通过掌握关键概念和用法，我们可以更好地设计和实现网页布局。
希望本文能够帮助你理解CSS Grid布局，并在实际项目中应用它。如果有任何问题或建议，请随时留言。谢谢阅读！
本文来自极简博客，作者：软件测试视界，转载请注明原文链接：CSS Grid布局指南（CSS Grid布局设计）
