前言
自适应布局（Responsive Layout）在各种设备上都能够适用，是前端开发中必不可少的一环。CSS Grid 是一个非常优秀的工具，可以帮助我们实现自适应布局，使得布局更加灵活、清晰。今天，我们就来一起学习一下如何使用CSS Grid实现自适应布局。
什么是 CSS Grid？
CSS Grid 是一种二维布局模型，我们可以将页面分割为行和列，进行位置和大小的调整，它提供了比 Flexbox 更加强大和灵活的布局能力。
如何使用 CSS Grid？
在使用 CSS Grid 进行布局时，我们需要先定义一个网格。在这个网格内，我们可以定义行、列的数量、宽度、高度等属性，进而进行布局设计。
下面是一个简单的CSS Grid布局：
.grid {
display: grid; // 定义要使用 Grid 进行布局
grid-template-columns: repeat(3, 1fr); // 定义三列等分布局
grid-template-rows: repeat(3, 100px); // 定义三行为100像素高度
grid-gap: 10px; // 定义每个格子之间的间隙为10像素
}在上述代码中，我们通过 display 属性指定我们使用 CSS Grid 进行布局。接着，通过 grid-template-columns 和 grid-template-rows 定义行和列的数量和大小。这里的 repeat() 函数表示重复的次数和表达式。
最后，grid-gap 属性可以定义每个格子之间的间隙大小。在这个例子中，每个格子之间的距离为 10 像素。
CSS Grid 布局实例
下面，我们来看一下一个简单的布局实例。
<div class="container"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="content">Content</div> <div class="footer">Footer</div> </div>
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- ----- -----
------------------- ---- --- -----
------- ------
--------- -----
-
------- -
----------------- -----
------ ------
------------------ --
---------------- --
-------- -----
-
-------- -
----------------- -----
-------- -----
-
-------- -
----------------- ------
-------- -----
-
------- -
----------------- -----
------ ------
-------- -----
-
------ ----------- ------ -
---------- -
-------- ------
------- -----
-
-------- ------- -
-------- -----
-
--------- -------- -
------ -----
-------------- -----
-
-在上面这个例子中，我们首先定义了一个容器，然后在这个容器中定义了四个子元素：header、sidebar、content 和 footer 。接下来，使用 CSS Grid 进行布局。我们将根据需要，使用4个属性来定义这个网格。
grid-template-columns: 200px auto;
这集网格中，第一列大小为200像素，第二列大小自适应。我们同样定义了行的大小：第1行为自适应大小、第2行为自适应大小、第3行为自适应大小。这个单元格网格如下：
-- -------------------- ---- ------- --------------------- - ------ -- - - -- - ----------- ------- - - -- - - --------- - - -- - --------------------- - ------ - ---------------------
接着，我们通过 grid-column-start 和 grid-column-end 属性来设置 header 元素的列号开始和结束位置，使其跨越前两列。同样，footer 元素的列号跨越后两列。接下来，我们为所有的组件都分配了宽度或高度大小。
最后，我们通过媒体查询进行响应式设计，当页面的宽度小于767像素时，我们将使用另一种布局方式使页面更适宜移动端设备的体验。
结论
CSS Grid 是一个非常好的工具，可以帮助我们实现自适应布局，使得布局更加灵活、清晰。我们可以在实际项目中使用这个技术来实现优美、高效的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672863212e7021665e20077d