前言
在前端开发中，我们经常需要创建网格系统来帮助我们布局页面。但是手动编写网格系统代码通常比较繁琐，而且容易出错。这时候，使用 npm 包 girders 可以帮助我们快速地生成网格系统布局代码。
什么是 girders
girders 是一个基于 flexbox 的轻量级、响应式的网格系统，可以用来创建各种同样分布的网格。它是一个 npm 包，支持 Sass 和 Less 预处理器。
概述
girders 具有几个重要的特性：
- 响应式：可以根据不同的屏幕大小定义网格的列数；
- 选项灵活：可以定义每个列之间的间距大小，以及列与列之间是否具有相同的宽度；
- 易于使用：可以快速创建网格布局，并在 HTML 中使用。
安装
使用 npm 安装 girders：
npm install girders --save-dev
使用
配置
首先，您需要定义 girders 的一些配置选项。这可以通过 Sass 或者 Less 变量来实现。默认情况下，girders 会使用以下变量：
$grid-columns: 12 !default; // 定义列数 $grid-gutter: 24px !default; // 定义列之间的间距 $grid-equalize-columns: false !default; // 定义列宽是否相等
要修改选项，您可以在项目中定义这些变量的值：
// 定义变量值 $grid-columns: 8; $grid-gutter: 15px; $grid-equalize-columns: true; // 引入 girders @import 'path/to/girders/girders';
使用
现在，您可以使用 girders 来创建网格布局。下面是一个简单的示例：
<div class="grid"> <div class="col-4">Column 1</div> <div class="col-4">Column 2</div> <div class="col-4">Column 3</div> </div>
在上面的例子中，我们使用了一个父元素来包含所有的列。该父元素的类名为 grid。而列元素则使用了 col-4 类名来指定每个列的大小。这里，4 表示这是一个占据父元素四分之一宽度的列。
如果您使用了之前定义的 12 列网格，那么使用 col-4 类名创建的列就会占据父元素所有的三分之一宽度。
响应式布局
girders 也支持响应式布局。您可以在不同的媒体查询中为网格定义不同的列数。例如：
-- -------------------- ---- ------- -- ------- ------------------ - --- ------ --- ------ --- ------ --- ------ -- -- --------- -------------- - -------- --- --- -- --- -- --- --- --- -- -- -- -- ------- ------- --------------------------
在上面的例子中，我们定义了 4 个断点，并为每个断点定义不同的列数。在每个断点之间，girders 会使用默认的 12 列网格。
然后，在 HTML 中，使用 col-{breakpoint}-{size} 类名来定义不同屏幕尺寸下的列宽。例如：
<div class="grid"> <div class="col-12 col-md-6 col-lg-4">Column 1</div> <div class="col-12 col-md-6 col-lg-4">Column 2</div> <div class="col-12 col-md-6 col-lg-4">Column 3</div> </div>
在上面的例子中，我们定义了三个列，分别在不同屏幕尺寸下占据父元素不同的宽度。
其他选项
除了前面提到的变量和类名，girders 还提供了其他一些选项，例如：
grid-center
设置这个属性为 true，可以让网格系统中的列居中。例如：
<div class="grid grid-center"> <div class="col-6">Column 1</div> <div class="col-6">Column 2</div> </div>
grid-middle
设置这个属性为 true，可以让网格系统中的列在垂直方向上居中。例如：
<div class="grid grid-middle"> <div class="col-6">Column 1</div> <div class="col-6">Column 2</div> </div>
总结
girders 是一个轻量级、响应式的网格系统，可以在前端项目中用来快速创建网格布局。它支持 Sass 和 Less 预处理器，并且支持响应式布局和其他一些选项。在使用 girders 之前，需要先定义一些配置选项，然后在 HTML 中使用相应的类名来创建网格布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005595f81e8991b448d6c73