介绍
Gridd 是一个基于 CSS Grid System 的 JavaScript 库，它可以帮助开发人员更快捷地创建 CSS 列表格布局。Gridd 提供了许多预设的样式类，可以很容易地对表格进行自定义和修改。
安装
在使用 gridd 之前，需要先安装它。你可以通过 npm 进行安装，运行以下命令：
npm install gridd
安装完成后，你可以在你的项目中引入 gridd：
import Gridd from 'gridd';
快速开始使用
安装 gridd 之后，我们就可以开始用它创建表格布局了。Gridd 有两种布局方式，分别是 Grid 和 List。下面我们将逐步介绍如何使用它们。
Grid 布局
Grid 布局就像 CSS Grid 一样，将元素组织成行和列。我们可以使用以下代码将元素组成一个 grid：
<div class="gridd grid"> <div class="gridd-item">1</div> <div class="gridd-item">2</div> <div class="gridd-item">3</div> <div class="gridd-item">4</div> <div class="gridd-item">5</div> <div class="gridd-item">6</div> </div>
这将创建一个包含 6 个元素的 3x2 的表格。每个元素都具有 gridd-item 类。
此时页面上将显示一个空的表格。我们需要通过 CSS 来编写样式并定义每个元素的位置。
例如，以下代码将创建一个具有四列的表格：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ----- --------- ----- - ----------- - ----------------- ----- ----------- ------- -------- ----- ---------- ---- -
上面的 CSS 代码设置了每个列的宽度为 1fr，间距为 20px。
List 布局
List 布局就像垂直列表一样，将元素从上到下排列。我们可以使用以下代码将元素组成一个 list：
<div class="gridd list"> <div class="gridd-item">1</div> <div class="gridd-item">2</div> <div class="gridd-item">3</div> <div class="gridd-item">4</div> <div class="gridd-item">5</div> <div class="gridd-item">6</div> </div>
这将创建一个具有 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