前言
网页设计中，栅格系统是一个十分重要的概念。栅格系统能够让数据在页面中更加有序和美观。在前端开发中，栅格系统也是一个基本的知识点。在此，介绍一款名为 @stejnar/grid 的 npm 包，它可以实现方便快捷地搭建栅格系统。
简介
@stejnar/grid 是一款轻量级的 css 栅格系统，它使用了 flex 布局来实现布局，支持可定制的响应式布局，代码简洁易懂，适合小型项目快速构建。
安装
使用 @stejnar/grid 的前提条件是已经正确安装了 Node.js 和 npm。如果没有，可以在官网上下载。
安装 @stejnar/grid：
npm install @stejnar/grid
使用
html 结构
使用 @stejnar/grid，首先需要在 html 中定义一个 .grid 容器，并将要布局的元素放到容器的 .grid-row 中。在 .grid-row 中，每一个要布局的元素都需要定义一个 .grid-col。
-- -------------------- ---- -------
---- -------------
---- -----------------
---- -----------------------
---- -----------------------
---- -----------------------
------
---- -----------------
---- -----------------------
---- -----------------------
---- -----------------------
------
------css 样式
在 css 中，需要导入 @stejnar/grid。
@import '@stejnar/grid';
定义栅格
@stejnar/grid 中默认提供了 12 个栅格。每一个 .grid-col 元素，可以使用以下类名来定义栅格的数量：
- .col-1
- .col-2
- .col-3
- .col-4
- .col-5
- .col-6
- .col-7
- .col-8
- .col-9
- .col-10
- .col-11
- .col-12
<div class="grid">
<div class="grid-row">
<div class="grid-col col-4"></div>
<div class="grid-col col-4"></div>
<div class="grid-col col-4"></div>
</div>
</div>响应式布局
@stejnar/grid 还支持响应式布局。可以使用下面的类名来定义不同的屏幕宽度下的栅格数量：
- .xs-* （移动端）: 0~767px
- .sm-* （平板）: 768~991px
- .md-* （小屏幕）: 992~1199px
- .lg-* （大屏幕）: >=1200px
<div class="grid">
<div class="grid-row">
<div class="grid-col col-4 sm-col-6 md-col-9"></div>
<div class="grid-col col-4 sm-col-3 md-col-2"></div>
<div class="grid-col col-4 sm-col-3 md-col-1"></div>
</div>
</div>在上面的例子中，.grid-col 元素在移动端屏幕下占据 6、3、3 格，在平板屏幕下占据 6、2、1 格，在小屏幕下占据 9、2、1 格。
嵌套布局
@stejnar/grid 支持嵌套栅格。可以使用 .grid-nested 类名来嵌套栅格。
-- -------------------- ---- -------
---- -------------
---- -----------------
---- --------------- -------
---- ----------- -------------
---- -----------------
---- --------------- -------------
---- --------------- -------------
------
---- -----------------
---- --------------- -------------
---- --------------- -------------
------
------
------
---- --------------- -------------
------
------自定义变量
@stejnar/grid 支持自定义变量，可以在变量文件中修改栅格相关的变量。
$grid-columns: 12; // 栅格数量 $grid-gutter: 20px; // 栅格之间的间距
示例代码
-- -------------------- ---- -------
---- -------------
---- -----------------
---- --------------- -------------
---- --------------- -------------
---- --------------- -------------
------
---- -----------------
---- --------------- ----- -------- -----------------
---- --------------- ----- -------- ----------------
------
---- -----------------
---- --------------- ------ ----------------
---- --------------- ------ ----------------
------
------@import '@stejnar/grid'; $grid-columns: 12; $grid-gutter: 20px;
总结
@stejnar/grid 是一款轻量级的 css 栅格系统，使用起来非常简单。如果你正在需要开发一个小型项目，可以使用 @stejnar/grid 来实现方便快捷的布局功能。通过使用 @stejnar/grid，你不仅能够学到栅格系统的设计和实现，也会看到如何使用 Node.js 和 npm 来构建自己的 web 工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d0d81e8991b448daa1b