作为一名前端开发者，在设计和开发页面布局时，经常需要考虑各种复杂的网格布局。但是，在使用传统的 CSS 布局方式时，由于布局算法的限制，实现复杂的网格布局往往会变得非常困难。不过，自从引入了 CSS Grid 布局之后，我们的网格布局世界发生了很大的变化。在本篇文章中，我们将介绍 CSS Grid 布局的实用技巧和应用场景。
什么是 CSS Grid 布局
CSS Grid 布局是一种多行多列的网格布局系统，它使用定义在容器中的行和列来创建单元格，在这些单元格中我们可以对子元素进行定位和布局。CSS Grid 布局采用了一种声明性的语法，通过定义行和列的数目和宽度以及子元素应该出现在哪些单元格中来创建页面布局。
CSS Grid 布局可以替代传统的 float 布局、绝对定位布局、flexbox 布局等布局方式，但是在一些浏览器中，如 IE11，不支持 CSS Grid 布局。在这种情况下，我们需要使用其他方式来实现相同的布局。
CSS Grid 的基本用法
在进行 CSS Grid 布局时，需要用到以下两个 CSS 属性来定义网格布局：
-- -------------------- ---- ------- -- ---------- -- ------------------- ------------ ---- ---------- ------------ ---- ---------- ---- ---------------------- ------------ ---- ---------- ------------ ---- ---------- ---- -- ------ -- -------------------- ---------- --------- --------- ---- ---------- --------- --------- ---- ------
其中，grid-template-rows 和 grid-template-columns 用于定义需要划分的网格线，可以使用 auto、fr、minmax 等单位来设置每一行或列的宽度。网格线标识使用 []，用于标示网格线的起始和结束位置。
grid-template-areas 利用一个字符串网格来定义网格布局，其中每个格子可以是一个变量名称用于引用子元素来填充网格。
以下是一个简单的 CSS Grid 布局实例，它将一个网格划分为三行三列：
.container {
display: grid;
grid-template-rows: 50px 100px 200px;
grid-template-columns: 100px 200px 300px;
}此外，我们还可以使用 grid-row 和 grid-column 属性来定义各个子元素应该处于哪些行和列之中。
.item {
grid-row: <开始行> / <结束行>;
grid-column: <开始列> / <结束列>;
}CSS Grid 的实用技巧
使用自适应单位
除了常规的 px，em，rem 等单位，我们还可以使用一种新的自适应单位：fr。这个单位表示一个可用空间的比例，例如，如果在 grid-template-columns 中使用了以下属性：
grid-template-columns: 1fr 2fr 1fr;
意味着第一列和第三列宽度相等，第二列的宽度为第一列和第三列宽度的两倍。
使用 fr 单位可以使布局更加自适应，从而避免了设置像素大小的后顾之忧。
嵌套网格布局
在 CSS Grid 布局中，子元素可以是容器，它们也可以具有自己的网格。这为我们提供了更多的自由度来进行布局。例如：
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ---- ------ ---------------------- --- ---- - ------ - -------- ----- ------------------- ----- ------ ---------------------- --- ---- - ------ - --------- - - -- ------------ - - -- -
这里有两个容器：.container 和 .inner，并使用 CSS Grid 布局来显示它们的内容。容器 .outer 被赋予了一个类似于 CSS 中的position: absolute; 的效果，它可以跨越 .container 的两行和两列，并放置在网格布局的左上角。
使用 grid-auto-rows
默认情况下，当我们设置行高时，CSS Grid 布局会自动地添加所需数量的行，以适应内容。但这可能会导致网格布局超出容器的大小。为了避免这种情况的发生，我们可以使用 grid-auto-rows 属性来指定单元格中内容的高度。
.container {
display: grid;
grid-template-rows: 50px 100px 200px;
grid-template-columns: 100px 200px 300px;
grid-auto-rows: 100px;
}使用 grid-gap
grid-gap 属性可以用来设置单元格之间的间距，包括行间距和列间距。例如：
.container {
display: grid;
grid-template-rows: 50px 100px 200px;
grid-template-columns: 100px 200px 400px;
grid-gap: 20px;
}这个例子将同一行两个单元格之间以及不同行之间留有 20 像素的间距。
使用 grid-template-areas
grid-template-areas 可以用于定义网格布局的区域，以及确定子元素在这些区域内的位置。这个属性需要用到一个字符串网格，例如：
-- -------------------- ---- -------
---------- -
-------- -----
------------------- ---- ----- ------
---------------------- ----- ----- ------
--------------------
------- ------ -------
-------- ---- -----
-------- ---- ------
-
------------ -
---------- -------
-
------------- -
---------- --------
-
---------- -
---------- -----
-这个例子中，.container 的网格布局被划分为 3 行和 3 列，并使用 grid-template-areas 属性来定义了这个网格布局的区域。然后，我们为每个子元素定义了一个 grid-area 属性来描述它们在这个区域中的位置。例如，.item-header 位于网格布局的第一行，第一列，它占据了整个 header 区域。
总结
CSS Grid 布局是一种非常强大的网格布局系统，它可以让我们非常方便地实现各种复杂的布局效果。在本文中，我们介绍了 CSS Grid 布局的基本用法以及一些实用技巧，例如自适应单位、嵌套网格布局、使用 grid-gap 属性和 grid-template-areas 属性等。通过这些技巧，我们可以更加高效地实现页面布局，并为开发更加灵活的网页提供了更多的可能性。
示例代码
完整的示例代码可以在以下代码块中找到：
<div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> <div class="item item4"></div> <div class="item item5"></div> <div class="item item6"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ------- --------- ----- - ----- - -------- ----- ----------- ----- ------ ----- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9a829f6b2d6eab34ddef6