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

随着网页设计的发展，排版成为了一个越来越重要的问题。为解决这个问题，前端设计师们开始采用基于格栅的排版方式。而 desinax-typographic-grid 就是一款能够帮助前端设计师在排版方面更快更好完成工作的 npm 包。

desinax-typographic-grid 简介

功能概述

desinax-typographic-grid 提供了一个易用的 CSS 格栅系统，可以快速的创建出多栏、均分或不等分的栅格页面，同时根据设计师的设计要求，进行灵活的自定义设置。

特点

轻量：使用 minified 代码，压缩后文件大小只有 2 Kb。
灵活：通过自定义变量，可以自主定义出属于自己的网格系统。
易于使用：使用简单明了，只需要很少的配置即可快速上手。
兼容性强：兼容到 IE11。
响应式：可以自定义媒体查询，方便地适应不同设备尺寸。

安装 desinax-typographic-grid

下面是在项目中使用 npm 安装 desinax-typographic-grid 的方法。

打开终端，进入项目目录。
输入以下命令，安装 desinax-typographic-grid：

npm install desinax-typographic-grid

引入 CSS 文件：

import 'desinax-typographic-grid/dist/desinax-typographic-grid.min.css';

使用 desinax-typographic-grid

要使用 desinax-typographic-grid，需要先在 HTML 中定义容器元素的 class 为“container”：

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">左侧内容</div>
    <div class="col-12 col-md-6">右侧内容</div>
  </div>
</div>

代码中，使用了 grid 栅格系统的三个核心类名：.container，.row 和 .col-。.container 容器类是定宽的，并且水平居中，.row 是网格系统中的一行容器，.col- 是网格系统中的列容器，其中 * 为网格系统的列数。

例如，在上面的代码中，.col-12 表示这个元素占用网格系统中的 12 格。同时，.col-md-* 表示在中等尺寸的设备上显示的样式。因此，在大屏上这两列的宽度是一样的，但在小屏设备上，这两列的宽度是均分的。这一切的设置，都是通过 desinax-typographic-grid 内部的响应式规则实现的。

注：以下代码均需要在项目中引用 desinax-typographic-grid.css 文件。

开始使用

我们可以通过以下方式快速上手 desinax-typographic-grid：

定义一个容器：

<div class="container"></div>

在容器中创建一个行：

<div class="container">
  <div class="row"></div>
</div>

在行中创建一个列：

<div class="container">
  <div class="row">
    <div class="col"></div>
  </div>
</div>

这个元素会自动占用网格系统中的 1 格。

宽度控制

我们可以通过如下方式自主设置特定元素的宽度：

设置也可以只针对某些屏幕尺寸适用：

<div class="container">
  <div class="row">
    <div class="col col-md-6"></div>
  </div>
</div>

在大屏幕设备上，这个元素宽度会自动占用网格系统中的 6 格，其他设备上会占用网格系统中的 1 格。

如果我们想要一个一半一半的布局，可以使用如下代码：

<div class="container">
  <div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
  </div>
</div>

偏移

通过偏移属性可以控制元素在水平方向上相对于它的位置进行自由移动：

<div class="container">
  <div class="row">
    <div class="col-6"></div>
    <div class="col-6 offset-2"></div>
  </div>
</div>

这个实例当中，右侧这个元素会占据屏幕的 6 格，并在左边相对移动了 2 格，即显示在容器的第三列。

自定义变量

除了使用默认的 desinax-typographic-grid 设置，你还可以自主使用自定义变量，来控制网格系统行与列的样式：

:root {
  --row-gutter: 20px;
  --col-gap: 20px;
  --container-max-width: 1200px;
}

这个例子当中，通过更改自定义变量的值，你可以控制行与列之间的间距，列与列之间的间距，以及容器的最大宽度限制。

总结

desinax-typographic-grid 让前端开发者在网页排版制作上有远超常规的高效。作为一款轻量级灵活的 CSS 栅格系统，其已经越来越多地被前端人员所使用。希望今天的文章能使更多的开发者摆脱排版困扰，利用 desinax-typographic-grid 快速完成网页设计。

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