近年来，响应式布局已经成为了网页设计的主流。为了满足不同尺寸屏幕的需求，我们需要不同大小和布局的格子和容器。这时候，elastic-grid 就能派上用场了。
简介
elastic-grid 是一个基于 SASS 和 CSS3 的响应式网格框架。它支持任意数量的媒体查询，并可以轻松地适应不同屏幕大小和方向。elastic-grid 还提供了许多有用的 mixin 和变量，可以帮助你更方便地创建自己的网格系统。
安装
使用 npm 进行安装：
npm install elastic-grid --save
然后你就可以在你的项目中使用它了。
使用
elastic-grid 提供了一个非常简单的使用方法，只需要在 CSS 样式中定义类名 row 和 col 就可以了。其中，row 定义了一个行容器，而 col 则定义了行内格子。
<div class="row"> <div class="col col-4">...</div> <div class="col col-8">...</div> </div>
每个 col 都需要定义自己的宽度。col-1 表示一个格子宽度为 1，col-2 表示一个格子宽度为 2，以此类推。
另外，elastic-grid 还支持额外的类名，用于定义不同尺寸屏幕的样式。例如，col-2-md 表示在中等尺寸屏幕上，该格子的宽度为 2。该类名的语法为 col-X-SIZE，其中 SIZE 可以是以下值之一：
xs：(extra-small) 非常小的屏幕，如移动设备的竖屏模式；sm：(small) 小屏幕，如移动设备的横屏模式；md：(medium) 中等尺寸屏幕，如平板电脑；lg：(large) 大屏幕，如桌面电脑。
如果你需要定义自己的样式，elastic-grid 同样提供了 mixin 和变量来帮助你。例如，你可以使用变量 $grid-gutter-width 来定义格子之间的空隙宽度：
-- -------------------- ---- -------
------------------- -----
---- -
------------ ----------------------
------------- ----------------------
---- -
------------- ---------------------
-------------- ---------------------
-
-示例代码
这里提供一个简单的示例代码，用来演示 elastic-grid 的用法。注意，为了让示例更明显，我们使用了一些背景色和边框来区分不同的格子。
-- -------------------- ---- -------
------
----- ---------------- -------------------------------------------------------
-------
---- -
----------- -----------
-------- -----
----------------- --------
------- --- ----- -----
-
------ - ----------------- ----- -
------ - ----------------- ----- -
------ - ----------------- ----- -
------ - ----------------- ----- -
--------
-------
------
---- ------------
---- ---------- --------------
---- ---------- --------------
---- ---------- --------------
---- ---------- --------------
------
-------结论
elastic-grid 是一个功能强大且易于使用的网格框架，它可以帮助我们快速构建响应式布局。通过深入的学习和实践，我们可以更好地理解其内部的工作原理，并根据自己的需求来定制自己的网格系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e281e8991b448d7750