简介
Gridion 是一个基于 CSS 的栅格布局系统，通过 npm 包的方式提供了便捷的集成方式和完整的文档支持。它可以帮助前端开发者快速地构建响应式布局。
安装
使用 npm，执行以下命令来全局安装 Gridion：
npm install -g gridion
或者将其作为项目的依赖项来安装：
npm install gridion
使用
在 HTML 文件中引入 gridion 样式文件：
<link rel="stylesheet" href="node_modules/gridion/dist/gridion.min.css">
Gridion 提供了 12 个栏目的定义，因此，栅格系统基于 12 的倍数，网格列可以通过添加 .gridion 类的方式来创建。例如，如下代码可以定义一个带有两个栏目的网格布局：
<div class="gridion col-6"> <div class="item">栏目1</div> <div class="item">栏目2</div> </div>
其中，col-6 表示网格的宽度占据栅格的 6 份。
响应式布局
Gridion 提供了 5 个断点，分别是：
- 手机（小于等于 480px）
- 平板电脑（大于 480px，小于等于 768px）
- 笔记本电脑（大于 768px，小于等于 1024px）
- 台式电脑（大于 1024px，小于等于 1200px）
- 大型显示器（大于 1200px）
在使用时，可以使用 -xs、-sm、-md、-lg、-xl 后缀来表示相应的断点。例如，下面是三个栏目在不同的断点上的定义：
<div class="gridion col-xs-12 col-md-4">栏目 1</div> <div class="gridion col-xs-12 col-md-4">栏目 2</div> <div class="gridion col-xs-12 col-md-4">栏目 3</div>
上述代码中，栅格指定为手机上占据 12 份宽度，同时在笔记本电脑和大型显示器上宽度为 4 份。
偏移量
在 Gridion 中使用 .offset-x 类来实现偏移，其中 x 取值范围为 1 到 11 。例如：
<div class="gridion col-md-3 offset-md-3">栏目 1</div> <div class="gridion col-md-3">栏目 2</div>
即可得到偏移两个栏目的布局效果。
示例代码
-- -------------------- ---- ------- ----- ---------------- ------------------------------------------------- ---- -------------- --------- ---------- ---- ---------------------- ------ ---- -------------- --------- ---------- ---- ---------------------- ------ ---- -------------- --------- ---------- ---- ---------------------- ------ ---- -------------- -------- ------------- ---- ---------------------- ------ ---- -------------- ---------- ---- ---------------------- ------
结论
Gridion 是一个轻便易用且功能强大的栅格布局系统，可以快速地构建响应式布局。在开发过程中，建议优先考虑使用 Gridion，可以大大提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600481e8991b448ddd2f