📅 最后修改于: 2023-12-03 15:08:08.290000 🧑 作者: Mango
CSS 网格布局是一种用于网页布局的 CSS 模块，它允许开发人员以一种简单且灵活的方式实现二维布局。
CSS 网格布局由两个主要部分组成：网格容器和网格项。网格容器是一种 HTML 元素，它可以被任何元素定义为网格容器，包括 <body> 元素。网格容器用于定义一个网格的基础架构。网格项，则是容器内的元素。
一个网格可以被分成若干行和若干列，这些行和列构成了一个网格轨道。网格轨道可以通过使用 grid-template-rows 和 grid-template-columns 属性来定义。
以下是一个三行三列的网格布局样例：
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
在这个例子中，grid-container 元素被定义为一个网格容器，并且它有三个等高的行和三个等宽的列。注意，1fr 是一个相对长度，它表示一个网格轨道的剩余空间。
默认情况下，网格项按照它们在 HTML 中出现的顺序排列。但是，通过使用 grid-row 和 grid-column 属性，我们可以将网格项放置在特定的位置。
例如，我们可以将一个元素放在第 1 行、第 2 列：
.item {
grid-row: 1;
grid-column: 2;
}
我们也可以将一个元素放在第 1 列到第 3 行的区域：
.item {
grid-row: 1 / span 3;
grid-column: 1;
}
在这个例子中，grid-row 属性的值为 1 / span 3，它告诉网格将元素放置在从第 1 行开始，跨越 3 行的区域内。
CSS 网格布局还具有自适应布局的功能。通过使用 grid-template-rows 和 grid-template-columns 属性，我们可以定义多个等宽或等高的网格轨道，甚至可以使用自动适应的大小。
例如，如果我们想要一个包含三列的网格，其中第一列的宽度为 100px，第二列自适应，第三列的宽度为 50%：
.grid-container {
display: grid;
grid-template-columns: 100px auto 50%;
}
在这个例子中，第一列的宽度为 100px，第二列将自适应并填充剩余的空间，第三列的宽度为页面宽度的一半。
CSS 网格布局还允许我们为网格容器中的网格项定义间隔。可以使用 grid-row-gap 和 grid-column-gap 属性来定义行和列之间的间隔。
例如，如果我们想要在每行和每列之间添加 10px 的间隔：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 10px;
grid-column-gap: 10px;
}
在这个例子中，每行和每列之间都有一个 10px 的间隔。
以上是 CSS 网格布局的一些基础知识。使用网格布局，我们可以轻松地创建复杂的网页布局，而无需使用复杂的 CSS 或 JavaScript。如果您在下一个网页项目中需要使用网格布局，请确保尝试一下！