在现代 Web 设计中，响应式设计已经成为标配，而网格布局则是其中最常用的布局方式之一。网格布局可以让你在设计中更加自由，能将页面的结构分割成不同的块，并可以让不同的元素有序的排列。
本文将会介绍在响应式设计中如何实现网格布局。我们将涉及到 CSS 的 flexbox 和 grid 两种方式，同时也会介绍如何使用第三方库和框架来实现网格布局。
Flexbox 网格布局
使用 Flexbox 实现网格布局在很多场合下非常方便。Flexbox 是一种 CSS 布局方式，可以让元素在一个容器中更加自由的排列。
Flexbox 布局的基础
使用 Flexbox 的前提是将元素的 display 属性设置为 flex，并将它们置于一个容器中。容器下面的元素可以根据布局的需要进行排列。
下面是一个简单的 Flexbox 示例：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
--------------- ----
-
---- -
------ ------
------- ------
----------------- -------
------- ----
-
--------
-------
------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------
-------
-------上面的代码中，我们将容器 .container 设置为 display: flex，在默认情况下 Flexbox 的主轴方向是横向的。flex-direction 属性可以控制 Flexbox 的方向，这里我们将它设置为 row。我们将三个元素 .box 放入容器中，并设置它们的宽高和背景颜色，同时为了使它们之间有一定的间距，我们也设置了元素的边距为 5px。
Flexbox 网格布局
使用 Flexbox 实现网格布局的话，可以将一个容器中的元素按照网格划分成不同的区域。假设我们希望将一个容器分成 4 列，网格布局可以这样实现：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
---------- -----
-
---- -
----------- ----
------- ------
----------------- -------
------- ----
-
--------
-------
------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------
-------
-------上面的代码中，容器 .container 依然是一个 Flexbox 容器，不过我们将 flex-wrap 属性设置为 wrap。这样即可控制元素在到达容器边缘时自动换行。
接下来，我们将 .box 元素的宽度设置为 25%，高度设置为 100px。由于一个容器中有四个 .box 元素，因此它们将分别占据了 4 列的位置。由于浏览器默认将空间平分给所有元素，因此我们可以设置 flex-basis 属性来指定每个元素的理想宽度。在这里我们将每个元素占据的空间设置为 25%，这样它们就可以完整的展示在容器中。
Grid 布局
除了 Flexbox，现代 CSS 还引入了一种全新的布局方式——Grid 布局。Grid 布局可以实现网格布局，而且功能更加强大。它能让我们使用一个二维的网格来排列元素，可以更加准确地控制页面布局。
Grid 布局的基础
Grid 布局需要创建一个网格容器，然后在其中提供列和行。默认情况下每个元素都是一个网格单元格，可通过设置 grid-column、grid-row 和 grid-template-areas 属性来定位元素。
下面是一个简单的 Grid 布局的代码：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
---------------------- --------- -----
--------- ----
-
---- -
----------------- -------
------- ------
-
--------
-------
------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------
-------
-------我们首先将容器 .container 的 display 属性设置为 grid，这会将容器创建成一个网格布局。接着，我们使用 grid-template-columns 属性来定义三个等宽的列。在这里我们使用了 repeat 函数来重复给定的参数，这里是一个 1fr 和两个逗号。它表示三个等宽的列。grid-gap 属性用来定义网格元素之间的空白。
Grid 网格布局
使用 Grid 布局可以实现更加复杂的网格布局，例如 3 行 3 列的网格。可以使用 grid-template-rows 和 grid-template-columns 来指定行和列的数量，和刚才的 grid-template-columns 属性一样，我们可以使用 repeat 函数来重复给定的参数来快速地定义网格布局。
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
------------------- --------- -----
---------------------- --------- -----
--------- ----
-
---- -
----------------- -------
------- ------
-
--------
-------
------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------
-------
-------上述代码中，我们将 grid-template-rows 属性设置为 repeat(3, 1fr)，将 grid-template-columns 属性设置为 repeat(3, 1fr)。这个属性将会告诉布局系统需要将容器划分成 9 个网格。由于我们已经在 .box 类中定义了元素的高度为 100px，因此元素会自动将父容器的高度平均分为 3 份。
第三方库和框架
除了原生的 CSS 网格布局，现在已经有许多库和框架可以帮助我们实现响应式的网格布局，如 Bootstrap 和 Material Design。这些框架中通常内置了网格布局，并且提供了大量的示例和模板，可以根据自己的需求快速开发出响应式的布局。
下面是一个使用 Bootstrap 框架实现网格布局的代码：
-- -------------------- ---- -------
--------- -----
------
------
-----
----------------
-------------------------------------------------------------------------------------------
--
-------
---- -
----------------- -------
------- ------
-
--------
-------
------
---- ------------------
---- ------------
---- --------------
---- ------------------
------
---- --------------
---- ------------------
------
---- --------------
---- ------------------
------
------
---- ------------
---- --------------
---- ------------------
------
---- --------------
---- ------------------
------
------
------
-------
-------在这里，我们使用了 Bootstrap 框架，它提供了列布局，我们可以将列的大小设置为 12 个单元格。在上述代码中，我们将一个容器 .container 分成了两行。在第一行中，我们将容器分成了 3 份，每份所占的单元格数目是 4，这样每个元素就会占据整个容器的三分之一。在第二行中，我们将容器分成了两份，每份占据整个容器的一半。
结论
网格布局是现代 Web 设计中不可或缺的一部分，可以让你根据自己的需求快速地实现响应式的元素布局。在这里，我们介绍了 CSS 的 Flexbox 和 Grid 两种方式来实现网格布局，以及如何使用第三方的库和框架来简化开发。希望本文可以对你了解和掌握网格布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f650c1c5c563ced58261a2