在传统的网页设计中，栅格布局（grid layout）被广泛应用，特别是在响应式布局（responsive design）中更是不可或缺的一部分。CSS Grid 是一个新的 CSS 标准，已经被所有主流浏览器完美支持，它大大地扩展了栅格布局的能力。本文将介绍 CSS Grid 的高级特性，及如何在实践中充分利用它来实现复杂的栅格布局。
CSS Grid 简介
CSS Grid 是一个用于网页布局的二维网格系统。它极大地扩展了样式表中定义栅格布局的能力，引入了许多基于坐标轴的布局概念。CSS Grid 使用网格容器（grid container）和网格子元素（grid item）两个基本概念来定义布局，其中网格容器是一个用于包裹网格子元素的容器，网格子元素则是放置在网格上的内容。CSS Grid 提供了大量的属性和功能来控制网格的行和列，从而允许 CSS 设计师以完全新的方式设计网页布局。
栅格布局的基本概念
要理解 CSS Grid 的高级特性，我们需要首先了解栅格布局的基本概念。栅格布局是将页面布局划分为若干列和行，并将所有内容对应放置在对应的格子上。
CSS Grid 中的栅格布局由下面这些基本概念构成：
- 网格容器
HTML 元素可以被定义为网格容器，就像传统的 div 元素一样。网格容器是所有网格项目的父容器，它可以是任何包含网格项目的 HTML 元素。
<div class="grid-container"> <div class="grid-item">Grid item 1</div> <div class="grid-item">Grid item 2</div> <div class="grid-item">Grid item 3</div> </div>
- 网格项
网格项是网格的基本单位，它可以是任何包含在网格容器中的 HTML 元素，如 div、span，甚至是图片、媒体文件等。
<div class="grid-container"> <div class="grid-item">Grid item 1</div> <div class="grid-item">Grid item 2</div> <div class="grid-item">Grid item 3</div> </div>
- 行和列
CSS Grid 中的行和列是网格的基本单元，它们围绕着网格项形成。使用 grid-template-rows 属性和 grid-template-columns 属性可以设置行和列的大小和数量。这些属性都是空格分隔的值列表，每个值代表一个行或列，并按顺序排列。值可以是固定长度、百分比、fr 或 minmax 函数。CSS Grid 还提供了 grid-auto-rows 和 grid-auto-columns，它们用于设置自动赋予列或行的大小。
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: auto auto auto;
}- 网格线
网格线是指定网格项目位置的线，可以是水平或垂直的线。每个网格可以有四个网格线：左侧线、右侧线、上侧线和下侧线。网格线用从 1 开始的数字来标识，用于确切地指定一个网格项目所在的行数或列数。网格线也可以用字符串来表示，如 "col1" 表示第一列，"row2" 表示第二行。网格线可以用于 grid-template-rows 和 grid-template-columns 属性中，用于定义网格的布局。
.grid-container {
display: grid;
grid-template-columns: [col1] 100px [col2] 100px [col3] 100px [col4];
grid-template-rows: [row1] auto [row2] auto [row3] auto [row4];
}CSS Grid 的高级特性
上述介绍了 CSS Grid 的基本概念及其使用方法，接下来将迎来 CSS Grid 的高级特性，包括网格轨道（grid track）、网格区域（grid area）和指定显示顺序（order）。
网格轨道
网格轨道是指任意两个相邻的行或列之间的空间。在 CSS Grid 中，可以设置多个投影轨道来划分网格。通过在 grid-template-columns 和 grid-template-rows 中使用空格分隔的长度值、百分比、fr 或 minmax 进行定义从而创建网格轨道。当需要扩展网格时，也可以使用 grid-template-areas 来指定网格区域，如下所示：
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- --- ----
------------------- --- ----
--------------------
------- -------
---- -----
------- --------
-
---------- -
---------- -------
-在这个例子中，我们使用 grid-template-areas 指定了网格区域，用于指定每个子元素该呈现在哪个网格区域。网格的大小可以使用 grid-template-columns 和 grid-template-rows 按照 grid-template-area 中定义的区域大小来设置。
网格区域
网格元素之间的空间可以被定义为网格区域，它们是一个或多个网格单元格的集合。CSS Grid 允许用户将多个单元格组合成一个指定区域，称为网格区域。这通常通过 grid-template-areas 实现，如下所示：
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
----------- -----
-------- -----
--------------------
------- ------ -------
---- ---- ------
------- ------ --------
-
----------------- -
---------- -------
-
-------------- -
---------- ----
-
--------------- -
---------- -----
-
---------------- -
---------- ------
-
----------------- -
---------- -------
-在这个例子中，我们将多个单元格组合成了三个具有不同尺寸的区域：页眉、页脚和两个列，列之间有一些空隙。CSS Grid 还提供了一组基于命名网格线边距的属性，比如 grid-row 和 grid-column。这些属性可以通过网格线轨道号或隐式命名进行设置，提供了进一步的布局控制。
指定显示顺序
CSS Grid 还支持指定子元素的显示顺序。使用 order 属性可以为网格项指定顺序，顺序的值越高，将越处于顶部。如果两个方块的顺序属性相等，则使用 HTML 文档中它们出现的顺序彼此决定。按照下面的代码设置顺序值：
-- -------------------- ---- ------- ------------ - ------ -- - ------------ - ------ -- - ------------ - ------ -- -
实战示例
下面是一个复杂的实例，它使用了所有的 CSS Grid 高级特性。
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
----------- -----
-------- -----
--------------------
------- ------ -------
---- ---- ------
------- ------ --------
-
----------------- -
----------------- --------
------- --- ----- -----
---------- -------
-
-------------- -
----------------- --------
------- --- ----- -----
---------- ----
-
--------------- -
----------------- --------
------- --- ----- -----
---------- -----
------ --
-
---------------- -
----------------- --------
------- --- ----- -----
---------- ------
------ --
-
----------------- -
----------------- --------
------- --- ----- -----
---------- -------
-在这个示例中，我们使用了区域来定义布局，在每个单元格中放置了网格元素，并针对网格元素使用了高级特性来控制布局和顺序。
总结
通过学习本文，您已经掌握了 CSS Grid 的高级特性，并了解了如何在实践中利用这些高级特性来实现复杂的栅格布局。您现在可以使用网格容器、网格轨道、网格区域和指定显示顺序来构建各种布局。在日常工作中，您应该根据网页的响应式要求来选择不同的方案，同时避免滥用高级特性，使您的网站在各种设备上显示良好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c6d8c968c7c53b077940b