在网页开发中，布局是一个非常重要的部分。近年来，CSS Grid 布局成为前端开发中应用比较广泛的一种布局方式。它的最大优点就是能够非常方便地实现网页的自适应和固定比例布局，本文将详细介绍如何使用 CSS Grid 实现这两种布局方式。
自适应布局
所谓自适应布局，就是让网页的布局能够根据用户的设备和浏览器窗口的大小自动调整，以适应不同的屏幕尺寸。CSS Grid 布局提供了很多方便的属性和函数，可以轻松实现自适应布局。
grid-template-columns 和 grid-template-rows
grid-template-columns 和 grid-template-rows 属性分别用于设置列和行的大小和数量。它们都允许使用长度、百分比和 fr 函数来定义大小。其中 fr 函数的意义是分数单位，用来表示网格容器中剩余空间的比例。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px 1fr;
}上面的代码定义了一个三行三列的网格容器，第一行高度为 100px，第二行高度为 200px，第三行占据剩余的空间。三列的宽度比例为 1:2:1。这个网格容器会随着浏览器窗口的大小而自动调整，以适应不同的屏幕尺寸。
grid-auto-columns 和 grid-auto-rows
grid-auto-columns 和 grid-auto-rows 属性用于设置网格自动布局的大小和数量。它们允许使用 minmax()、max-content、min-content 等函数来定义大小。其中 max-content 和 min-content 分别用于计算网格内容的最大和最小尺寸。
.container {
display: grid;
grid-auto-columns: minmax(100px, 1fr);
grid-auto-rows: min-content;
}上面的代码定义了一个网格容器，每个网格自动计算列宽的最小值为 100px，最大值为剩余空间的比例。每行的高度自适应网格内容的高度。
grid-gap
grid-gap 属性用于设置网格的间距。它允许使用长度、百分比和 em 等单位来定义间距。也可以分别设置行间距和列间距。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}上面的代码定义了一个两行两列的网格容器，每个网格之间的间距为 20px。
固定比例布局
所谓固定比例布局，就是让网页的元素保持一定的宽高比例。CSS Grid 布局同样可以轻松实现固定比例布局。
grid-template-areas
grid-template-areas 属性用于创建命名的网格模板。在模板中可以指定每个网格的位置和大小，并使用任意命名来表示不同的网格区域。
-- -------------------- ---- -------
---------- -
-------- -----
--------------------
------- -------
-------- --------
------- --------
---------------------- ----- ----
------------------- ----- --- -----
-
------- -
---------- -------
-
-------- -
---------- --------
-
-------- -
---------- --------
-
------- -
---------- -------
-上面的代码定义了一个网格模板，有三行两列，每个网格的位置和大小都指定了。其中网格区域 header、sidebar、content 和 footer 使用了不同的命名。这个模板最终被应用到 .container 上，各个网格通过类名来指定位置。
padding-bottom
padding-bottom 属性可以用于创建一个固定比例的占位符，使得网页元素保持一定的宽高比例。它的取值是一个百分比，表示占位符的高度与宽度的比例。
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- --- ----
--------- -----
-
----- -
--------- ---------
-
----- --- -
--------- ---------
---- --
----- --
------ -----
------- -----
----------- ------
-
------------ -
-------- ---
-------- ------
--------------- ----
-上面的代码定义了一个两行两列的网格容器，每个网格使用一个占位符保持了宽高比例为 4:3。其中 .item 作为每个网格的容器，使用了相对定位和绝对定位，在占位符上层放置了一个图片。占位符本身的高度通过 padding-bottom 来决定。
总结
CSS Grid 布局可以轻松实现网页的自适应和固定比例布局。通过使用 grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows、grid-gap、grid-template-areas 等属性，可以创建出非常灵活的网页布局。希望本文可以对大家学习和使用 CSS Grid 布局提供帮助。
完整示例代码：https://codepen.io/pen/?template=OJjKEdM
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465b3f3968c7c53b065df86