CSS Grid 是一种强大的布局方式，它使得我们能够轻松地创建复杂的布局。它的最大优势是能够实现自适应布局，这意味着网页可以自动适应不同屏幕大小和设备类型。在本文中，我们将讨论如何使用 CSS Grid 实现自适应布局，包括以下步骤：
- 创建网格容器
- 定义网格行和列
- 分配网格单元格
- 设置网格项的位置和大小
- 指定网格项的跨度
- 实现自适应布局
1. 创建网格容器
要使用 CSS Grid，首先需要创建一个网格容器。可以使用 display: grid 属性来创建一个网格容器，如下所示：
.container { display: grid; }
2. 定义网格行和列
接下来，需要定义网格容器的行和列。可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格容器的行和列，如下所示：
.container { display: grid; grid-template-rows: 50px 100px 200px; grid-template-columns: 1fr 2fr 1fr; }
上面的代码定义了一个有三行和三列的网格容器。第一行高度为 50 像素，第二行高度为 100 像素，第三行高度为 200 像素。第一列宽度为容器宽度的 1/4，第二列宽度为容器宽度的 1/2，第三列宽度为容器宽度的 1/4。
3. 分配网格单元格
接下来，需要将网格容器分配给网格单元格。可以使用 grid-row 和 grid-column 属性来分配网格单元格，如下所示：
.item { grid-row: 1 / 2; grid-column: 2 / 3; }
上面的代码将 .item 分配给第一行第二列的网格单元格。
4. 设置网格项的位置和大小
可以使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 属性来设置网格项的位置和大小，如下所示：
.item { grid-row-start: 1; grid-row-end: 3; grid-column-start: 2; grid-column-end: 4; }
上面的代码将 .item 设置为跨越第一行到第三行，第二列到第四列的网格单元格。
5. 指定网格项的跨度
可以使用 grid-row 和 grid-column 属性来指定网格项的跨度，如下所示：
.item { grid-row: 1 / span 2; grid-column: 2 / span 2; }
上面的代码将 .item 设置为跨越第一行和第二行，第二列和第三列的网格单元格。
6. 实现自适应布局
要实现自适应布局，可以使用 grid-template-areas 属性来定义网格布局，并使用媒体查询来设置不同屏幕大小的布局。例如，以下代码定义了一个自适应布局：
-- -------------------- ---- ------- ---------- - -------- ----- -------------------- ------- ------ ------- ----- ---- -------- ------- ------ -------- ------------------- ---- --- ----- ---------------------- --- --- ---- - ------ ----------- ------ - ---------- - -------------------- -------- ------ --------- --------- ------------------- ---- --- --- --- ----- ---------------------- ---- - -展开代码
上面的代码定义了一个有三行和三列的网格容器，其中头部和底部行的高度为自适应，中间行的高度为剩余空间的一半。第一列和第三列的宽度为容器宽度的 1/4，第二列的宽度为容器宽度的 1/2。在小屏幕上，布局变成了一个列布局，其中每个网格项都占据一整行。
总之，CSS Grid 是一种强大的布局方式，可以实现自适应布局。通过了解如何创建网格容器，定义网格行和列，分配网格单元格，设置网格项的位置和大小，指定网格项的跨度以及实现自适应布局，可以轻松地使用 CSS Grid 实现自适应布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cbbe41e46428fe9e4c4d9c
