前言
现代化的前端开发已经离不开 npm 包的使用。而且，有了 npm 包的搭档 webpack 和 babel，我们可以愉快地进行最新技术的尝试，构建出更加现代化、简明化的代码。
在这里，我想要向大家介绍一款较为实用的 npm 包 —— brkstn-grid-cssnext。希望本篇文章可以为您提供有深度、有学习及指导意义的教程。
brkstn-grid-cssnext 是什么？
brkstn-grid-cssnext 是一款 CSS 栅格系统，其基础是 CSS3 的 flex 布局，而它的扩展则使用了 cssnext 插件。brkstn-grid-cssnext 构建的计算栅格系统采用的是左闭右开的算法，能够非常顺畅地进行布局，另外，由于使用了 cssnext 插件，利用了现代浏览器的兼容性，在保证性能的前提下，做到了 IE10+ 兼容。
最后，brkstn-grid-cssnext 最优秀的一点在于，它是一个相对于其他 CSS 栅格系统区别较大的“预编译器”，也就是说，它提供了编译后 CSS 文件的预览。这让开发者的从编写 CSS 到实现网站布局的过程非常贴心、舒适。
如何使用 brkstn-grid-cssnext？
1. 安装 brkstn-grid-cssnext
安装 brkstn-grid-cssnext 的方法很简单，只需要打开终端，在项目的根目录下执行如下命令：
$ yarn add brkstn-grid-cssnext
或是，您也可以使用 npm。
$ npm install --save brkstn-grid-cssnext
2. 引入和配置 brkstn-grid-cssnext
在安装完 brkstn-grid-cssnext 后，我们就需要引入它，并配置好我们的 webpack。
第一步：在您的项目的入口处，使用如下命令来引入 brkstn-grid-cssnext：
@import '~brkstn-grid-cssnext'; //使用 ~ 会直接指向node_modules，不然webpack不会找到
若您时使用现代化语法编写的网站，在 css-loader 中必须添加 {importLoaders: 1}。这是因为在对网站进行优化构建时，如果没有添加这个配置项，webpack 会自动对导入的文件进行打包，导致新的困扰。
-- -------------------- ---- -------
-
----- ------------------
---- -
--------------------------------
-
------- ------------------------------
-------- -
-------------- --
--
--
-
------- ----------------------------------
-------- -
------ ----------
-------- -- -- -
----------------------------------
--------------
--------- -
------
----- - ----------
-------- -----
---- -- - ---
--
-------- ----------
---
--
---------- --------------- -- -------------------
--
--
-
------- -------------------------------
-------- -
----- -------- ------------------------
------------- ------------- - ------------
---------- --------------- -- -------------------
--
--
--
-第二步：现在您已经将 brkstn-grid-cssnext 引入了您的项目中，接下来，在用于正式使用的 CSS 文件中，您可以使用品牌的主题颜色、字体和其他样式。
$brand-color: #007bff;
p {
color: $brand-color;
}3. 使用 brkstn-grid-cssnext 做响应式布局
在 brkstn-grid-cssnext 中支持了两种常见的栅格系统：grid-column 和 grid-row。这里，我们将在 grid-column 上做例子，你可以从中扩展出 grid-row。
首先我们先编写一段 HTML 代码。
-- -------------------- ---- -------
---- ------------------
---- ------------
---- -----------------------
---- -----------------------
---- -----------------------
------
------
---- ------------------
---- ------------
---- ------------ ------------- - --------
---- ------------ ------------- - --------
---- ------------ ------------- - --------
------
------接下来，我们就可以开始使用 brkstn-grid-cssnext 进行布局啦！
-- -------------------- ---- -------
---------- -
---------- -----
------- - -----
-------------- -----
------------- -----
-
---- -
-------- -----
---------- -----
------------- ------
------------ ------
-
---- -
--------- ---------
------ -----
----------- ----
-------------- -----
------------- -----
-
------ -
----- - - -----
------ ------------ -----------
-
------ -
----- - - -----
------ --- -----------
-
--------- -
----- - - -----
------ ------------ -----------
-
------ ----------- ------ -
--------- -
------ ------------ -----------
-
--------- -
------ --- -----------
-
-------- -
--------- ---------
------ ----
------- ----
------- -----
-------- --
--------- -------
----- ------- -- -- ---
------------ -------
------------- --
-总结
大家好！今天我向大家介绍了 brkstn-grid-cssnext，一款基于 cssnext 扩展并支持左闭右开布局算法的 CSS 栅格系统。我们略微深入了一下 Flex 布局，利用 brkstn-grid-cssnext 实现了效果比较良好的响应式布局，同时也向大家展示了如何基于 webpack 集成 npm 包。
希望本文能对大家学习和研究这方面有帮助。如果你有任何疑问或建议，欢迎在评论区留言！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde51c7