CSS Grid 布局是一种基于网格的布局系统，它允许开发者将页面分割为行和列，以便更方便地排列元素。它的灵活性和易用性使得它成为前端开发人员中受欢迎的布局系统之一。在本文中，我们将深入介绍 20 个实践小技巧，帮助你更好地理解和使用 CSS Grid 布局。
1. 网格布局的基本概念
在开始之前，让我们先回顾一下 CSS Grid 布局的基本概念。网格是由行和列组成的，其中每个单元格可以放置一个元素。以下是网格布局的基本术语：
- 网格容器：包含所有的网格项的元素，它的
display属性必须设置为grid。 - 网格行：网格容器中的一行元素，使用
grid-template-rows属性定义。 - 网格列：网格容器中的一列元素，使用
grid-template-columns属性定义。 - 网格项：网格容器中的一个元素，可以是文本内容、图像、按钮等。
2. 使用网格模板进行布局
使用网格模板是实现网格布局最重要的一部分。网格模板定义了网格容器中的行和列，我们可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格行和网格列。例如：
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
}以上代码定义了一个网格容器，包含了两个行和两个列。第一行高度为 100 像素，第二行高度为 200 像素，第一列的宽度为第二列的一半。
3. 使用 grid-column 和 grid-row 属性定位网格项
一旦我们定义了网格模板，就可以使用 grid-column 和 grid-row 属性来定位网格项。这些属性定义了网格项所覆盖的行和列，在使用时直接指定起始和结束的位置即可。例如：
.item {
grid-row: 1 / 3;
grid-column: 1 / 3;
}以上代码将 .item 元素放置在了第 1 行到第 3 行，第 1 列到第 3 列的位置。
4. 使用自动网格布局
自动网格布局指的是当网格项未被指定行和列位置时，如何将其放置在网格容器中。我们可以通过设置网格模板的大小和数量，使得未指定行和列位置的网格项能够自动布局。例如：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}以上代码定义了一个自动布局的网格容器，它会将每个网格项的最小宽度限制在 200 像素，但同时保证了每个列的宽度不会小于 1 个网格项的宽度。
5. 使用 grid-template-areas 进行复杂布局
grid-template-areas 属性允许我们通过指定一个网格区域的名称来控制每个网格项的位置。该属性接受一个字符串列表，每个字符串代表一行网格。字符串中的每个部分代表该列中的一个网格项。例如：
// javascriptcn.com 代码示例
.container {
display: grid;
grid-template-areas:
"header header header"
"nav main main"
"nav footer footer";
}
.header {
grid-area: header;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}以上代码定义了一个复杂布局，通过使用 grid-template-areas 和 grid-area 属性来实现。
6. 使用 grid-auto-flow 属性控制自动布局方向
grid-auto-flow 属性用于控制未被指定行和列位置的网格项的自动布局方向，默认值是 row，即从左到右。我们可以将其设置为 column 使它从上到下布局。例如：
.container {
display: grid;
grid-auto-flow: column;
}以上代码将 grid-auto-flow 属性设置为 column，使得未被指定位置的网格项从上到下、从左到右依次排列。
7. 使用网格间距进行对齐
使用网格间距可以让网格项之间出现空隙，从而使布局更加美观。我们可以使用 grid-row-gap 和 grid-column-gap 属性来定义网格行和网格列之间的距离。例如：
.container {
display: grid;
grid-row-gap: 10px;
grid-column-gap: 20px;
}以上代码定义了一个网格容器，每个行之间的距离为 10 像素，每个列之间的距离为 20 像素。
8. 使用 align-items 和 justify-items 属性对齐网格项
align-items 和 justify-items 属性用于控制网格项的对齐方式，分别对应垂直方向和水平方向。我们可以使用它们来将每个网格项都对齐到网格行和网格列的中心位置。例如：
.container {
display: grid;
align-items: center;
justify-items: center;
}以上代码定义了一个网格容器，将每个网格项都对齐到网格行和列的中心位置。
9. 使用 align-content 和 justify-content 属性对齐网格容器
align-content 和 justify-content 属性用于控制整个网格容器的对齐方式，分别对应垂直方向和水平方向。例如：
.container {
display: grid;
align-content: center;
justify-content: center;
}以上代码定义了一个网格容器，将整个容器都垂直居中和水平居中对齐。
10. 使用 grid-template-rows 和 grid-template-columns 响应式布局
我们可以使用 minmax() 函数定义一个行或列的最小值和最大值，这样可以根据视口的大小自动适应布局。例如：
.container {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}以上代码定义了一个随着屏幕大小变化而自适应的布局，每个网格项的最小宽度和高度均为 100 像素。
11. 使用 grid-template-areas 来创建响应式布局
我们也可以使用 grid-template-areas 属性来创建响应式布局。例如：
// javascriptcn.com 代码示例
.container {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
}
@media screen and (min-width: 500px) {
.container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: minmax(150px, 1fr) minmax(400px, 3fr);
}
}以上代码定义了一个响应式布局，当屏幕宽度小于 500 像素时，网格布局为单列，分为三行。当屏幕宽度大于 500 像素时，网格布局为双列，分为三行。
12. 使用 grid-row-start 和 grid-row-end 管理网格行
可以使用 grid-row-start 和 grid-row-end 属性来管理网格行。它们定义了从哪一行开始和哪一行结束，例如：
.item {
grid-column: 1 / 3;
grid-row-start: 2;
grid-row-end: 4;
}以上代码将 .item 元素放置在了第一列的第二行到第四行。
13. 使用 grid-column-start 和 grid-column-end 管理网格列
类似地，可以使用 grid-column-start 和 grid-column-end 属性来管理网格列，它们定义了从哪一列开始和哪一列结束，例如：
.item {
grid-row: 2 / 4;
grid-column-start: 2;
grid-column-end: 4;
}以上代码将 .item 元素放置在了第二行到第四行，第二列到第四列的位置。
14. 使用 grid-template-areas 管理网格区域
可以使用 grid-template-areas 属性来管理网格区域。定义网格区域时，每一块区域用一个由单引号或双引号包裹的字符串表示。例如：
// javascriptcn.com 代码示例
.container {
display: grid;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
}
.header {
grid-area: header;
}
.nav {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}以上代码定义了一个包含三行三列的网格布局，其中 .header 元素被放置在了第一行的整个行上，.sidebar 元素占据了第二行的右边，.main 元素占据了第二行的左边和第三行的整个行上，.footer 元素占据了第三行的整个行上。
15. 使用 grid-gap 属性管理网格间距
类似于 grid-row-gap 和 grid-column-gap 属性，grid-gap 属性也可以管理网格间距，它接受一个值，用于同时设置网格行间距和网格列间距。例如：
.container {
display: grid;
grid-gap: 10px;
}以上代码将每行和每列的间距都设置为 10 像素。
16. 使用 grid-auto-rows 和 grid-auto-columns 属性管理自动布局大小
我们可以使用 grid-auto-rows 和 grid-auto-columns 属性来管理自动布局的大小。例如：
.container {
display: grid;
grid-auto-rows: minmax(100px, 1fr);
grid-auto-columns: minmax(100px, 1fr);
}以上代码定义了一个自动布局的网格容器，每个网格项的最小高度和宽度为 100 像素。
17. 使用 grid-auto-flow 和 order 属性管理自动布局顺序
我们可以使用 grid-auto-flow 属性来控制网格项的自动布局方向。此外，我们还可以使用 order 属性来改变网格项的布局顺序，例如：
.item:first-child {
order: 1;
}
.item:last-child {
order: -1;
}以上代码指定了第一个网格项排在第一个位置，最后一个网格项排在最后一个位置。
18. 使用 grid-template-columns 属性管理网格列大小
我们可以使用 grid-template-columns 属性来管理网格列大小。例如：
.container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
}以上代码定义了一个包含三列的网格布局，每列的最小宽度为 100 像素。
19. 使用 grid-template-rows 属性管理网格行大小
类似于 grid-template-columns 属性，我们还可以使用 grid-template-rows 属性来管理网格行大小。例如：
.container {
display: grid;
grid-template-rows: repeat(3, minmax(100px, 1fr));
}以上代码定义了一个包含三行的网格布局，每行的最小高度为 100 像素。
20. 使用 grid-row-gap 和 grid-column-gap 属性管理网格行和列的距离
最后，我们可以使用 grid-row-gap 和 grid-column-gap 属性来管理网格行和列之间的距离。例如：
.container {
display: grid;
grid-row-gap: 10px;
grid-column-gap: 20px;
}以上代码将每行之间的距离设置为 10 像素，每列之间的距离设置为 20 像素。
总结
在本文中，我们介绍了 CSS Grid 布局的 20 个实践小技巧，涵盖了网格模板、自动布局、响应式布局、网格间距和网格对齐管理等方面。通过这些技巧，您可以更好地应用 CSS Grid 布局来创造可自适应、可扩展的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f94cabf6b2d6eab30da47c