在前端开发领域中，有很多工具和库可供选择，可以大大提高我们的开发效率和代码质量。其中，npm包bourbon-neat是一个非常优秀的网格系统。
什么是bourbon-neat
bourbon-neat是基于SASS开发的网格系统，可以用来快速搭建响应式布局。它是bourbon的一个扩展包，提供了一些高级的网格布局功能，比如自适应列宽、多列等高、偏移等等。
安装bourbon-neat
首先，你需要在你的项目中安装npm包bourbon和bourbon-neat：
npm install bourbon --save npm install neat --save
然后，在你的SASS文件中导入bourbon和bourbon-neat：
@import 'bourbon/bourbon'; @import 'bourbon-neat/neat';
当你完成这些操作后，就可以开始使用bourbon-neat了。
bourbon-neat使用指南
布局
定义一个带有4列的响应式布局：
-- -------------------- ---- -------
---------- -
-------- ---------------
-------- ------------------
----- -
-------- ---------------
-
------ ---- ------ --- ----------- ------ -
----- -
-------- ----------------
-
-
-这个布局中，我们定义了一个包含四列的容器，并选中容器中所有项。媒体查询@media在视口宽度小于768px时将每个项的宽度更改为12列，从而实现在移动设备上获得单列布局。
Offsets
我们也可以使用bourbon-neat来创建带偏移的列：
-- -------------------- ---- -------
---------- -
-------- ---------------
-------- ------------------
----- -
-------- ---------------
---------------- -
-------- ---------------
-------- ----------------------
-
-
-在上述示例中，我们定义了一个带有两个3列宽的项的容器。然后，我们将第二个元素向右偏移一个列，从而获得两列宽度相等的列。
Equally-height columns
bourbon-neat允许我们很容易地实现等高列布局。对于两列，只需将grid-equal-columns应用于容器即可。
-- -------------------- ---- -------
---------- -
-------- ---------------
-------- ------------------
-------- -------------------
----- -
-------- ---------------
-
-结论
在本文中，我们学习了bourbon-neat的概念、如何安装bourbon-neat以及如何使用它来快速搭建响应式布局。bourbon-neat是一款优秀的网格系统，它使我们可以更加轻松和便捷地实现复杂的网格布局，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73417