在前端开发中，布局是十分关键的一个环节。而针对不同设备尺寸的布局设计，需要有一套简单易用的方案，这时我们就需要使用 @materialr/layout-grid。
介绍
@materialr/layout-grid 是基于 Google Material Design 标准规范，为响应式设计提供的栅格系统库。它可以帮助开发者稳定地在不同设备上实现协调一致的设计效果。
该库中的栅格系统，其基本元素是行（rows）和列（columns）。我们可以在行中添加一到多个列，用于创建一个更大的区域（就像在表格中使用单元格一样）。行和列的长度可以根据需求进行调整。
安装
想要使用该库，我们需要先将其安装到我们的项目中。使用 npm 命令即可安装：
npm install @materialr/layout-grid
使用
首先在代码中引入该库：
import '@materialr/layout-grid';
行与列
这是一个最基本的栅格使用方法：
<mr-row>
<mr-col span="6"></mr-col>
<mr-col span="3"></mr-col>
<mr-col span="3"></mr-col>
</mr-row>具体来说，上述代码中的行（mr-row）有三个列（mr-col）：第一个列使用了 6 个单位的宽度，后面两个列分别使用了 3 个单位的宽度。
响应式布局
我们可以在不同宽度尺寸下使用不同的列宽，以此来适应不同的设备尺寸。该库提供了许多在不同设备上自适应的宽度类。
<mr-row>
<mr-col span-lg="6" span-md="4" span-xs="2"></mr-col>
<mr-col span-lg="3" span-md="4" span-xs="6"></mr-col>
<mr-col span-lg="3" span-md="4" span-xs="4"></mr-col>
</mr-row>上述代码中的三个列，将在不同宽度尺寸下展现不同的宽度。以下是支持的所有宽度类：
| 宽度类 | 展示 |
|---|---|
| span-xs | 全部 |
| span-sm | ≥ 600px |
| span-md | ≥ 960px |
| span-lg | ≥ 1280px |
| span-xl | ≥ 1920px |
偏移
偏移是指使元素在栅格系统中相对于其它元素向左或向右移动。该库支持在行的开头或结尾，以及在行内部随意偏移一个或多个列。
<mr-row>
<mr-col span-xs="3"></mr-col>
<mr-col span-xs="3" offset-xs="3"></mr-col>
<mr-col span-xs="3"></mr-col>
</mr-row>上述代码中，第二列与前一个列之间向右偏移了 3 个单位的宽度。
嵌套
我们可以将一组列放在另一个列中，以实现更深层次的布局嵌套。
-- -------------------- ---- -------
--------
------- ---------
--------
------- ------------------
------- ------------------
---------
---------
------- ---------
--------
------- -------------------
---------
---------
---------上述代码中，两个列都包含了一组行和列——第一个列中又包含了两个拥有 6 个单位宽度的列，而第二个列中只有一个拥有 12 个单位宽度的列。
总结
通过本文的介绍，我们学习了 npm 包 @materialr/layout-grid 的基本用法。无论开发哪个规模的项目，本文中介绍的方法都可以帮助你更加稳定得实现栅格布局。而且，这一技术的应用也不仅限于 Web 界面的设计，它甚至可以被用于移动应用的开发中。我希望本文对你的学习或工作有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446d3