npm 包 gridgy 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，响应式布局（responsive design）得到了广泛的应用。而 css grid 布局制作响应式页面已经成为了开发者的首选。

而对于初学者而言，从零开始创建一个 CSS grid 的过程可能会有些困难。为此，npm 上有一个名为 gridgy 的包可以帮助我们快速创建基于 css grid 的页面布局。本文将详细介绍如何使用 gridgy，包括安装、语法说明以及实际应用。

安装 gridgy

我们可以使用如下命令来在我们的项目中安装 gridgy：

npm install gridgy

使用 gridgy

在使用 gridgy 之前，需要确保我们在 HTML 文件中已经引入了 gridgy，如下所示：

<head>
  <!-- 引入 gridgy CSS 样式 -->
  <link rel="stylesheet" href="path/to/gridgy.css">
</head>

接下来，我们来了解一下每个 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）。

下面是一个基本的使用示例：

<div class="grid">
  <div class="grid__item grid__item--span-6">1</div>
  <div class="grid__item grid__item--span-6">2</div>
  <div class="grid__item grid__item--span-4">3</div>
  <div class="grid__item grid__item--span-4">4</div>
  <div class="grid__item grid__item--span-4">5</div>
</div>

以上示例中，我们创建了一个容器元素 .grid，它包含了 5 个子元素。我们指定了前两个子元素 .grid__item--span-6，它们占据了一行的一半宽度，后面的 3 个子元素分别占据了一行的三分之一宽度。

进阶用法

我们还可以通过组合使用类名来实现更加复杂的布局。

响应式布局

我们可以通过 minWith 类名实现响应式布局。

<div class="grid">
  <div class="grid__item grid__item--span-6 grid__item--md-span-12">1</div>
  <div class="grid__item grid__item--span-6 grid__item--md-span-12">2</div>
  <div class="grid__item grid__item--span-12 grid__item--md-span-6">3</div>
  <div class="grid__item grid__item--span-12 grid__item--md-span-6">4</div>
</div>

以上的示例中，我们指定了前两个子元素在小于 768px 时占据一整行，而在大于等于 768px 时占据一半宽度。

偏移

我们可以通过 offset 类名来进行偏移。

<div class="grid">
  <div class="grid__item grid__item--span-6">1</div>
  <div class="grid__item grid__item--span-6">2</div>
  <div class="grid__item grid__item--span-4 grid__item--offset-4">3</div>
</div>

以上的示例中，我们指定了第三个子元素占据了一半宽度，并且在左侧偏移了一半宽度。

总结

通过使用 gridgy，我们可以很方便地创建基于 css grid 的布局。只需要在容器元素和子元素中添加相应的类名即可实现网格布局、响应式布局和偏移。初学者可以通过使用 gridgy 减少编写样式的时间，更快地实现自己想要的布局。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/102174