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