简介
nsg-grid 是一款基于 CSS 的栅格系统，它可以帮助你在前端开发过程中快速构建网页布局。nsg-grid 通过将网页布局分成若干个列和行来实现灵活性和响应式。nsg-grid 提供了多种尺寸来适应不同设备，而且它还支持自定义扩展。
安装
你可以使用 npm 进行安装：
npm install nsg-grid --save
当然你也可以使用 yarn：
yarn add nsg-grid
使用方法
基本使用
nsg-grid 提供了两种类型的容器：container 和 container-fluid。它们都包含了行（row）和列（column）的概念。container 和 container-fluid 的区别在于，前者是有固定宽度的，而后者是占据全屏幕的。
每个容器中，你可以定义若干个 row，而每个 row 中，你可以定义若干个 column。一个 column 大小总是基于总的容器宽度的一定比例。例如，如果一个 row 中有三个 column，它们的宽度分别为 4、4 和 4，那么它们总共占据了整个容器的 12 份中的 12 份。如果你希望将一个 column 宽度设置为其他值，可以使用 offset 或 order 等属性。
下面是 nsg-grid 提供的如何使用基本的代码片段：
-- -------------------- ---- -------
---- --------- -- ---
---- ------------------
---- --- - ---
---- ------------
---- ------ - ---
---- ---------------------
---- ---------------------
---- ---------------------
------
------
---- --------------- -- ---
---- ------------------------
---- --- - ---
---- ------------
---- ------ - ---
---- ---------------------
---- ---------------------
---- ---------------------
---- ---------------------
------
------自定义容器
你可以使用 nsg-grid 自带的 CSS 类来自定义容器，使其更加适用于你自己的项目。nsg-grid 提供了多种样式可自定义。
例如，如果你想要一个自定义的容器宽度，可以使用 .container-w-xx 或 .container-fluid-w-xx：
-- -------------------- ---- -------
---- --------- -- ---
---- ---------------- -----------------
---- --- - ---
---- ------------
---- ------ - ---
---- ---------------------
---- ---------------------
---- ---------------------
------
------
---- --------------- -- ---
---- ---------------------- -----------------------
---- --- - ---
---- ------------
---- ------ - ---
---- ---------------------
---- ---------------------
---- ---------------------
---- ---------------------
------
------自定义列
你也可以使用 nsg-grid 提供的 CSS 类来自定义列的大小、偏移量和顺序等属性。
例如，如果你想要一个具有不同宽度、偏移量和顺序的列，可以使用 .col-[size]-[order]-[offset]：
-- -------------------- ---- -------
---- --------- -- ---
---- ---------------- -----------------
---- --- - ---
---- ------------
---- ------ - ---
---- ------------ -------- -------- -----------------
---- ------------ -------- -------- -------- -----------------------
---- ------------ -------- -------- -------- --------------- -----------------------
------
------总结
nsg-grid 是一款十分方便、简单的栅格系统，它能帮助你在前端开发过程中快速布局。nsg-grid 支持自定义扩展，使得你可以根据自己的项目需要定制尺寸和样式。nsg-grid 的文档也十分详细，非常适合前端开发人员进行学习和使用。希望本文能够帮助你更好地使用这个优秀的 CSS 栅格系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f913d1de16d83a66afd