作为前端开发人员，我们常常需要使用各种样式库来美化页面。而 npm 作为前端开发中最常用的依赖管理工具，如果能够使用最新的样式库，那么我们的工作效率一定会大大提高。在这篇文章中，我将向大家介绍一款 npm 包 made-style，它是一款基于 CSS Grid 的响应式网格系统，使用非常方便，让我们一起来学习使用吧。
安装
我们可以通过 npm 安装 made-style：
npm install made-style
或者使用 yarn 安装：
yarn add made-style
安装完成后，我们需要在 HTML 文件中引入 made-style 的样式文件 。
<link rel="stylesheet" href="node_modules/made-style/dist/made-style.css">
使用
使用 made-style 网格系统很简单，只需要在 HTML 中添加类名 container 和 row 就可以创建网格容器和行了，如下所示：
-- -------------------- ---- -------
---- -- ---
---- ------------------
---- ------------
---- ----------------------
---- ----------------------
------
---- ------------
---- ----------------------
---- ----------------------
---- ----------------------
------
------在上面的示例中，我们创建了一个包含两个行的容器。第一个行包含两个占据 6 格的列，第二行包含三个占据 4 格的列。
栅格系统选项
在 col-* 类名中，* 代表该列占据的格数。可以使用以下类名：
col-1到col-12，代表该列占据的格数；col-sm-*，代表在小屏幕下该列的宽度；col-md-*，代表在中等屏幕下该列的宽度；col-lg-*，代表在大屏幕下该列的宽度；col-xl-*，代表在超大屏幕下该列的宽度。
栅格系统响应式
除了 col-* 类名，我们还可以在栅格中使用响应式类名来适应不同的屏幕大小。下面是响应式范围：
- 小屏幕：576px 及以下；
- 中等屏幕：576px 到 992px；
- 大屏幕：993px 到 1200px；
- 超大屏幕：1200px 及以上。
在以下示例中，当屏幕宽度小于或等于 576px 时，列将占据整个屏幕的宽度。
<div class="container">
<div class="row">
<div class="col-6 col-md-4 col-xl-2">内容</div>
<div class="col-6 col-md-4 col-xl-2">内容</div>
<div class="col-12 col-md-4 col-xl-8">内容</div>
</div>
</div>布局选项
还有一些布局选项可用于调整栅格的间距、对齐方式或重新设置列数。
栅格间距
默认情况下，gutter 类将为栅格容器和行添加 20px 的外边距和内边距。如果您不想使用间距，请不要添加 gutter 类。
如果您希望用户在网格行之间添加自定义间距，可以将 row 元素的样式设置为 row-space。然后，您可以通过增加 space-* 包含以下选项之一来控制行的间距。
space-none：不设置间距space-xs：4px 间距space-sm：8px 间距space-base：16px 间距space-md：24px 间距space-lg：32px 间距
下面是一个具有 4px 间距的示例。
-- -------------------- ---- -------
---- ------------------
---- ---------- --------- ----------
---- ----------------------
---- ----------------------
------
---- ---------- --------- ----------
---- ----------------------
---- ----------------------
---- ----------------------
------
------栅格列偏移量
如果您希望自定义列的偏移量，可以通过使用 col-offset-* 类来实现。
<div class="container">
<div class="row">
<div class="col-md-4 col-offset-md-2">内容</div>
<div class="col-md-4">内容</div>
</div>
</div>在上面的示例中，第一列将会在中等屏幕上向右偏移两个格的位置。
栅格重新整理
如果您的页面需要重新排列网格，您可以使用 reset-row 类。这个类将强制下一行从头开始。然后，在下一行之前，在容器中添加 skip-col-* 类。
下面是一个应用了 reset-row 的例子。
-- -------------------- ---- -------
---- ------------------
---- ------------
---- ------------------------
---- ------------- --------------------
---- ------------ ------------------------
---- ------------ ------------------------
---- ------------ ------------------------
---- ------------ ------------------------
---- ------------ ------------------------
------
------在上面的示例中，reset-row 类将第二列放到了下一行的开头。skip-col-* 类将第三列和第四列跳过了 6 和 12 个列。类似地，第五列、第六列和第七列将跳过 4 个列。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70607