CSS Grid 是一种强大的布局系统，能够帮助您以相对较少的代码创建复杂的布局。在本篇文章中，我们将介绍如何使用 CSS Grid 来创建自适应栅格布局。
什么是自适应栅格布局？
自适应栅格布局是指根据视口宽度自适应的栅格布局系统。在这种布局中，网格的列数和宽度会根据视口的大小自动调整，使其更适合不同尺寸设备上的显示。
自适应栅格布局通常使用无单位的关键字来定义列的宽度，如 fr (fractional unit)、minmax 和 auto 等。
创建自适应栅格布局
要创建自适应栅格布局，我们需要使用 CSS Grid 中的几个关键属性：grid-template-columns、grid-auto-rows、grid-column-gap 和 grid-row-gap。
grid-template-columns
grid-template-columns 属性用于定义网格的列数和宽度。指定的值会被分割为网格中的列数，如 repeat(3, 1fr) 表示三列，每列的宽度均为一份。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}在上面的示例中，我们创建了一个包含三列的自适应栅格布局。
grid-auto-rows
grid-auto-rows 属性用于定义未在 grid-template-columns 中指定宽度的行的默认高度。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}在上面的示例中，我们将未指定高度的行的默认高度设置为 200 像素。
grid-column-gap 和 grid-row-gap
grid-column-gap 和 grid-row-gap 属性用于定义网格中列和行之间的间隔。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
grid-column-gap: 20px;
grid-row-gap: 10px;
}在上面的示例中，我们在列之间添加了 20 像素的间隔，在行之间添加了 10 像素的间隔。
现在，我们已经创建了一个自适应栅格布局。接下来，我们将看看如何使用媒体查询来创建适用于不同视口大小的布局。
使用媒体查询创建响应式布局
在现代网站中，响应式设计是必不可少的。我们可以使用媒体查询来针对不同视口尺寸为不同设备创建不同的布局。
在下面的示例中，我们使用了两个媒体查询来为视口宽度在 768 像素以下和 1024 像素以上的设备创建不同的布局。
-- -------------------- ---- -------
----- -
-------- -----
---------------------- --------- -----
--------------- ------
---------------- -----
------------- -----
-
------ ------ --- ----------- ------ -
----- -
---------------------- --------- -----
-
-
------ ------ --- ----------- ------- -
----- -
---------------------- --------- -----
-
-在上面的示例中，我们针对宽度小于 768 像素和大于 1024 像素的视口分别创建了一个布局，分别使用了两列和四列来适应不同尺寸的设备。
示例代码
下面是一个包含自适应栅格布局和响应式布局的示例代码：
-- -------------------- ---- ------- ---- ------------- ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------- ------
-- -------------------- ---- -------
----- -
-------- -----
---------------------- --------- -----
--------------- ------
---------------- -----
------------- -----
-
------ ------ --- ----------- ------ -
----- -
---------------------- --------- -----
-
-
------ ------ --- ----------- ------- -
----- -
---------------------- --------- -----
-
-总结
在本篇文章中，我们介绍了如何使用 CSS Grid 来创建自适应栅格布局和响应式布局。使用 CSS Grid，我们能够以更少的代码创建出更复杂的布局，同时还能够适应不同尺寸设备上的显示。在实际开发中，我们可以根据具体情况灵活使用 CSS Grid 来实现我们的设计需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651cffb895b1f8cacd483d44