Carbon Grid 是一个基于 CSS Grid 布局的网格系统，适合用于结构简单的网站和应用。它提供了一系列 CSS 类，可以很方便地搭建响应式的布局。本文介绍如何使用 Carbon Grid。
安装
要使用 Carbon Grid，需要在项目中引入它的 npm 包。打开终端，进入项目根目录，运行以下命令：
npm install carbon-grid
安装完成后，在项目的 node_modules 目录下会出现 carbon-grid 文件夹。
使用
引入 CSS
Carbon Grid 的 CSS 文件位于 node_modules/carbon-grid/dist/carbon-grid.css，在 HTML 中引入它：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- --------------- ----- ---------------- ----------------------------------------------------- ------- ------ ---- ------- ------- ---- --- ------- -------
布局容器
使用 Carbon Grid 的第一步是创建一个容器，容器应该具有 container 类。
<div class="container"> <!-- 子元素 --> </div>
行和列
在容器中，可以使用 row 类来创建一行，然后在行中使用 col 类来创建列。列的列数可以通过类名控制，如：col-md-3 表示在中等尺寸屏幕下，这一列占据 1/4 的宽度。如下所示，创建一个具有两列、每列占据 1/2 宽度的行：
-- -------------------- ---- -------
---- ------------------
---- ------------
---- ---------- ----------
---- -- ---
------
---- ---------- ----------
---- -- ---
------
------
------网格系统
Carbon Grid 根据不同屏幕尺寸提供了不同的网格系统，通过在类名中添加 sm、md、lg、xl 前缀，可以控制在不同屏幕尺寸下，行和列的排版。
例如，下面的代码创建了一个具有两列、在小尺寸屏幕下每列占据全部宽度，在中等尺寸屏幕下每列占据 1/2 的宽度的行：
-- -------------------- ---- -------
---- ------------------
---- ------------
---- ---------- --------- ----------
---- -- ---
------
---- ---------- --------- ----------
---- -- ---
------
------
------偏移和间隙
Carbon Grid 允许对行和列进行偏移和间隙设置。使用 offset-、gap- 类，可以调整布局的外观和间距。例如，下面的代码创建了一个具有两列、在小尺寸屏幕下每列占据全部宽度，在中等尺寸屏幕下每列占据 2/3 的宽度，同时左列偏移了 1/9 的宽度：
-- -------------------- ---- -------
---- ------------------
---- ------------
---- ---------- --------- -------- ----------- ----------
---- -- ---
------
---- ---------- --------- -------- ----------
---- -- ---
------
------
------示例
下面的代码给出了一个简单的使用 Carbon Grid 的页面例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------
----- ---------------- -----------------------------------------------------
-------
------
--------
---- ------------------
---- ------------
---- ------------
------ ------------
------
------
------
---------
------
---- ------------------
---- ------------
---- ---------- -------- ----------
---------------------
---------- -- -- ------------
------- -- - ------ ------- -- ----- ------ ---------
------
---- ---------- -------- ----------
----------------
----
-------- ------
-------- ------
-------- ------
-----
------
------
------
-------
--------
---- ------------------
---- ------------
---- ------------
------------ - ---------
------
------
------
---------
-------
-------总结
使用 Carbon Grid 可以很方便地创建响应式的网格布局。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567cf81e8991b448e4099