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

什么是 wicked-grid?

wicked-grid 是一个面向前端开发的网格系统，基于 flexbox 实现，在响应式设计中具有很大的优势。wicked-grid 可以帮助开发者快速创建出各类网站布局，达到适应不同屏幕大小的效果，节约开发时间。

安装及使用

安装

wicked-grid 可以通过 npm 安装，使用如下命令：

$ npm install --save-dev wicked-grid

使用

引入 wicked-grid：

<link href="./node_modules/wicked-grid/wicked-grid.css" rel="stylesheet"/>

为元素添加 class 值：

添加 wg 作为 .wg 的前缀，后续跟数字代表占用的列数，例如: .wg-12,wg-10等。

<div class="wg-12">这是一行，占据 12 列</div>

<div class="wg-6">这一行占据 6 列</div>
<div class="wg-6">这一行占据 6 列</div>

深入理解

wicked-grid 为每个元素提供了五个 class 值，分别是 .wg, .wg-pull, .wg-push, .wg-tighten 和 .wg-loosen。

.wg

.wg 是 wicked-grid 最基本的 class，它告诉网格系统这个元素应该按照网格系统的规则来呈现。

<div class="wg-12">这是一行，占据 12 列</div>

.wg-pull

.wg-pull 将元素向左移动n个单位格子（n 为所分的列数），可以用于调整网格中个别元素的位置。

<div class="wg-6 wg-pull-3">这一行占据 6 列并向左移动了 3 列</div>

.wg-push

.wg-push 将元素向右移动n个单位格子（n 为所分的列数），可以用于调整网格中个别元素的位置。

<div class="wg-6 wg-push-3">这一行占据 6 列并向右移动了 3 列</div>

.wg-tighten

.wg-tighten 用于紧缩元素，当一个网格中的两个元素左右各占据了一半空间时，我们可以使用 .wg-tighten 将两个元素挤在一起。

<div class="wg-6 wg-tighten">这一行占据 6 列并被挤在一起</div>
<div class="wg-6 wg-tighten">这一行占据 6 列并被挤在一起</div>

.wg-loosen

.wg-loosen 用于进行元素之间的留白，当你需要让一个网格中的两个元素之间留出空白时，你可以在其中一个元素上使用 .wg-loosen 。

<div class="wg-6 wg-loosen">这一行占据 6 列并与下一个元素留出空白</div>
<div class="wg-6">这一行占据 6 列</div>

示例代码

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ------------------ ------------
  ----- ------------------------------------------------- ---------------- --
  -------
    ---- -
      ----------- -----
      ------ -----
      -------- -----
      ----------- -------
    -

    ---- --- -
      -------- ------
      ------- -----
      ------ -----
    -
  --------
-------
------
  ---- ------------ ------------ -- -------

  ---- ----------- --- ---------------- - ------- - -------
  ---- ----------- --- ---------------- - ------- - -------

  ---- ----------- --- ----------------- - -------------
  ---- ----------- --- ----------------- - -------------

  ---- ----------- --- ---------------- - ------------------
  ---- ----------- --------- ------------------------------------------------------------------------------------------------------------------------ --------
-------
-------

总结

wicked-grid 作为运用 flexbox 的网格系统，可以帮助我们更快速、更好地完成响应式布局，减少了在写响应式页面时的开发时间。使用它可以很方便地完成一些细节性的操作。欢迎大家在实际开发中尝试使用。

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