介绍
Gridd 是一个基于 CSS Grid System 的 JavaScript 库，它可以帮助开发人员更快捷地创建 CSS 列表格布局。Gridd 提供了许多预设的样式类，可以很容易地对表格进行自定义和修改。
安装
在使用 gridd 之前，需要先安装它。你可以通过 npm 进行安装，运行以下命令：
--- ------- -----
安装完成后，你可以在你的项目中引入 gridd：
------ ----- ---- --------
快速开始使用
安装 gridd 之后，我们就可以开始用它创建表格布局了。Gridd 有两种布局方式，分别是 Grid 和 List。下面我们将逐步介绍如何使用它们。
Grid 布局
Grid 布局就像 CSS Grid 一样，将元素组织成行和列。我们可以使用以下代码将元素组成一个 grid：
---- ------------ ------ ---- -------------------------- ---- -------------------------- ---- -------------------------- ---- -------------------------- ---- -------------------------- ---- -------------------------- ------
这将创建一个包含 6 个元素的 3x2 的表格。每个元素都具有 gridd-item 类。
此时页面上将显示一个空的表格。我们需要通过 CSS 来编写样式并定义每个元素的位置。
例如，以下代码将创建一个具有四列的表格：
----- - -------- ----- ---------------------- --------- ----- --------- ----- - ----------- - ----------------- ----- ----------- ------- -------- ----- ---------- ---- -
上面的 CSS 代码设置了每个列的宽度为 1fr，间距为 20px。
List 布局
List 布局就像垂直列表一样，将元素从上到下排列。我们可以使用以下代码将元素组成一个 list：
---- ------------ ------ ---- -------------------------- ---- -------------------------- ---- -------------------------- ---- -------------------------- ---- -------------------------- ---- -------------------------- ------
这将创建一个具有 6 个元素的列表。
我们可以使用以下 CSS 代码为每个元素添加样式：
----- - -------- ----- --------------- ------- - ----------- - ----------------- ----- ----------- ------- -------- ----- ---------- ---- -------------- ----- -
上面的 CSS 代码将列表设置为垂直方向，并设置每个元素的 margin-bottom 为 10px。
自定义样式
Gridd 提供了很多默认的样式，但我们可以轻松地覆盖它们或添加自己的样式。例如，我们可以使用以下 CSS 代码覆盖 Gridd 的默认样式：
----------- - ----------------- ------ ------ ------ ------------ ------ ----------- ---------- ----- ----------- ----- -------- ----- -------------- --- ----- ----- -
上面的 CSS 代码将元素的背景颜色设置为白色，字体颜色设置为黑色，字体设置为 Arial，字体大小设置为 16px，左对齐，并添加了一个 1px 的灰色边框。
总结
Gridd 是一个非常实用的 Grid System 库，可以帮助我们更快捷地创建表格布局。Gridd 提供了许多默认的样式，也可以自定义和修改样式。希望本文能够帮助你了解 Gridd，并在实际项目中应用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005758881e8991b448ea62b