在前端开发中，常常需要设计一些自适应的网页布局。但是，传统的布局方法比如 float 和 flexbox 不是很适合某些复杂的布局。而 CSS Grid Layout 是一种类似二维表格的布局方式，可以更轻松地对复杂网格进行控制。本文将详细介绍 CSS Grid 的使用方法以及实现自适应布局的相关技巧和指导意义。
CSS Grid 简介
CSS Grid 是一种基于网格的布局方式，它通过将页面分成行和列的网格，并将每个网格中的内容放置到合适的位置上，从而实现网页布局。相比之下，float 或者 flexbox 等传统布局方式需要通过各种 hack 才能达到复杂布局的效果。
在使用 CSS Grid 布局时，需要为父元素设置 display：grid；这将一次性地将该父元素中所有子元素都转换成网格项。 接下来，我们需要通过 grid-template-columns 和 grid-template-rows 属性指定每个网格的大小，以及通过 grid-column 和 grid-row 属性指定网格项目在网格中的位置。
接下来我们来看一个简单的例子：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- ----- ------ ------------------- ---- ----- --------- ---- - ----- - ----------------- ----- -
上面代码的意义为：.container 父级元素是个 3 列 2 行的网格，每个网格项的宽度是 100px，高度是 50px。网格项之间有 5 像素的间隙。.item 子元素为网格项目，每个项目的背景颜色是 #ddd。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
上面代码的运行效果如下：
实现自适应布局
CSS Grid 最大的优点就是可以通过网格布局非常灵活地实现自适应布局。下面我们将结合一些示例代码，来介绍实现自适应布局的相关技巧和指导意义。
1. 响应式网格布局
在移动设备和桌面设备上，相同的网页布局应该是不一样的。我们可以通过 CSS Grid 来实现响应式的网页布局。下面以一个简单的布局为例：
<div class="container"> <div class="header">头部</div> <div class="main">主体</div> <div class="sidebar">侧边栏</div> <div class="footer">底部</div> </div>
在这个布局中，.header、.main、.sidebar 和 .footer 都是网格项，我们可以通过下面的 CSS 代码，在移动设备上显示为一列，而在桌面设备上显示为两列：
-- -------------------- ---- -------
---------- -
-------- -----
--------- -----
-
------- -
------------ - - --
-
----- -
------------ - - --
-
-------- -
------------ - - --
-
------- -
------------ - - --
-
------ ----------- ------ -
---------- -
---------------------- --------- -----
-
-上面代码中的 .container 父元素采用默认网格设置，即每一列默认大小相同。当屏幕的宽度等于或超过 768 像素时，我们将这个父元素的 grid-template-columns 属性设置为 2 列，即每一列的大小为平分剩余空间的 1/2。
通过这段代码，我们可以在移动设备上显示为一列，而在桌面设备上显示为两列。
2. 自适应网格布局
有时候，我们的网页布局内容量是不固定的，在这种情况下，我们可以使用 CSS Grid 的自适应功能来适应不同的内容量。下面以一个图片应用的网页布局为例：
-- -------------------- ---- -------
---- ------------------
---- -------------
---- ---------------- -------
------
---- -------------
---- ---------------- -------
------
---- -------------
---- ---------------- -------
------
---- -------------
---- ---------------- -------
------
---- -------------
---- ---------------- -------
------
---- -------------
---- ---------------- -------
------
------上面代码中，.item 都是网格项，都放置一个图片。我们希望这 6 张图片按照列数自适应，每列图片的宽度等分剩余空间。我们可以通过下面的 CSS 代码来实现：
-- -------------------- ---- -------
---------- -
-------- -----
--------- -----
-
----- -
------ -----
-
------ ----------- ------ -
---------- -
---------------------- ---------------- ------------- ------
-
-上面代码中，我们通过在 grid-template-columns 属性中设置 repeat(auto-fit, minmax(150px, 1fr)) 来实现自适应布局。代码的意义为，自动适应计算每列能够容纳多少个 150 像素宽的网格，每列都充满剩余空间。
通过这段代码，我们可以实现自适应的网页布局，适应不同的窗口大小和图片数量，避免出现滚动条。
结语
CSS Grid 是一种强大的网站布局方案，对于移动设备和桌面设备的响应式布局以及自适应布局有着很大的帮助。我们需要学会使用 CSS Grid，并且根据实际需求来设计和优化网页布局。在多写实践和总结的过程中，我们可以发现用 CSS Grid 的方式来布局，不仅可以提高工作效率，而且能够让我们的代码更易于理解和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472bad5968c7c53b0052c43