在现代 Web 开发中，响应式布局（responsive design）得到了广泛的应用。而 css grid 布局制作响应式页面已经成为了开发者的首选。
而对于初学者而言，从零开始创建一个 CSS grid 的过程可能会有些困难。为此，npm 上有一个名为 gridgy 的包可以帮助我们快速创建基于 css grid 的页面布局。本文将详细介绍如何使用 gridgy，包括安装、语法说明以及实际应用。
安装 gridgy
我们可以使用如下命令来在我们的项目中安装 gridgy：
--- ------- ------
使用 gridgy
在使用 gridgy 之前，需要确保我们在 HTML 文件中已经引入了 gridgy，如下所示：
------ ---- -- ------ --- -- --- ----- ---------------- -------------------------- -------
接下来，我们来了解一下每个 gridgy 类名的作用。通常，一个容器元素（container element）会包含若干个子元素（child element）。
容器元素类名
.grid：用于定义容器元素。.grid--full：将容器元素填满整个窗口，无需定义宽和高。
子元素类名
.grid__item：定义子元素的基本样式，相当于默认值，通常不需要额外定义。.grid__item--span-{num}：指定子元素的跨越网格数。num的值为 1-12 之间的整数。.grid__item--offset-{num}：指定子元素的偏移（offset）网格数。num的值为 1-11 之间的整数，因为最多可以偏移到第 12 列之后。.grid__item--{minWidth}-{num}：指定子元素的最小宽度。minWidth可选值为sm（640px）、md（768px）、lg（1024px）和xl（1280px）。
下面是一个基本的使用示例：
---- ------------- ---- ----------------- --------------------------- ---- ----------------- --------------------------- ---- ----------------- --------------------------- ---- ----------------- --------------------------- ---- ----------------- --------------------------- ------
以上示例中，我们创建了一个容器元素 .grid，它包含了 5 个子元素。我们指定了前两个子元素 .grid__item--span-6，它们占据了一行的一半宽度，后面的 3 个子元素分别占据了一行的三分之一宽度。
进阶用法
我们还可以通过组合使用类名来实现更加复杂的布局。
响应式布局
我们可以通过 minWith 类名实现响应式布局。
---- ------------- ---- ----------------- ------------------ ------------------------------- ---- ----------------- ------------------ ------------------------------- ---- ----------------- ------------------- ------------------------------ ---- ----------------- ------------------- ------------------------------ ------
以上的示例中，我们指定了前两个子元素在小于 768px 时占据一整行，而在大于等于 768px 时占据一半宽度。
偏移
我们可以通过 offset 类名来进行偏移。
---- ------------- ---- ----------------- --------------------------- ---- ----------------- --------------------------- ---- ----------------- ------------------ ----------------------------- ------
以上的示例中，我们指定了第三个子元素占据了一半宽度，并且在左侧偏移了一半宽度。
总结
通过使用 gridgy，我们可以很方便地创建基于 css grid 的布局。只需要在容器元素和子元素中添加相应的类名即可实现网格布局、响应式布局和偏移。初学者可以通过使用 gridgy 减少编写样式的时间，更快地实现自己想要的布局。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/102174