前端开发中，布局是相当重要的一环，而 grid 布局又是一种非常常见的布局方式。相信大多数前端开发者都已经使用过或者听说过 CSS3 的 grid 属性，但是，我们在使用 CSS3 的 grid 属性时会发现一些不尽如人意的地方，比如浏览器兼容性、布局不灵活等等。那有没有一种更优秀的方式来实现 grid 布局呢？答案是肯定的。这里我们介绍一种更加灵活、易用的栅格化布局方式。
什么是栅格化布局
栅格化布局是一种快速、简单、灵活并可定制的网格系统，它不受浏览器版本的限制，且支持响应式布局。在栅格化布局的实现过程中，我们需要使用 Sass 预处理器，它可以大大简化样式代码的编写，使得栅格化布局易于维护和定制。
实现栅格化布局的基本组成
实现栅格化布局大体分为两个步骤：
- 定义网格系统的基本属性
- 使用栅格化布局实现页面布局
定义网格系统的基本属性
在 SASS 中，我们可以使用变量和 mixin 来定义基本属性，以方便地灵活控制样式。
首先，我们需要定义一个变量 $column，表示网格系统的列数，同时定义 $gutter 变量，表示列之间的间隔。
$column: 12; $gutter: 20px;
接着，我们可以通过 mixin 定义基本样式，包括容器、行、列等等。在栅格化布局中，最常见的是定义一个 .row 类，用来包裹所有的列。我们可以给 .row 定义一个最大宽度和一个左右 margin 值，以在浏览器中居中显示。然后，定义 .col 类，用来显示每一列的样式。我们在 .col 类中设置 float:left 和 width 属性，然后使用 calc() 函数计算列的宽度。
-- -------------------- ---- -------
------ ----------- -
---------- -------
------- - -----
-
------ ------
------------ -------- - --
------------- -------- - --
------- -
-------- ------
------ -----
-------- ---
-
-
------ --------- ------- -------- -
------ -----
------ --------- - --------- - ---------
-------- - ------- - --
-使用栅格化布局实现页面布局
在了解了栅格化布局的基本组成后，我们来看看如何使用它实现页面布局。
首先，我们需要在 HTML 中引入我们上面定义的基本样式文件。
<head> <link rel="stylesheet" href="grid.scss"> </head>
接着，在 HTML 中实现我们的页面布局：
-- -------------------- ---- -------
---- ------------------
---- ------------
---- ---------- ------------------
------
---- ------------
---- ---------- ---------- --------
---- ---------- ---------- --------
------
---- ------------
---- ---------- ------------- --------
---- ---------- ------------- --------
---- ---------- ------------- --------
------
---- ------------
---- ---------- ---------- --------
---- ---------- ---------- --------
---- ---------- ---------- --------
---- ---------- ---------- --------
------
---- ------------
---- ---------- ------------ ----- - -------
------
------在这里，我们已经使用栅格化布局实现了多种页面布局示例，包括全屏宽度、50% 宽度、33.33% 宽度、25% 宽度，以及自定义宽度和偏移的实现。这些布局通过简单的类名就能轻松地实现。
总结
通过使用 Sass 预处理器，我们可以方便地定义栅格化布局的基本属性，然后使用栅格化布局实现页面布局。相比于原生的 CSS3 grid，这种栅格化布局更加灵活、易用、易于维护和定制，特别是在响应式布局的应用中表现得更加优秀。如果你还没有使用过栅格化布局，现在就试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479627b968c7c53b056a2ff