什么是 just-grid-it？
just-grid-it 是一个基于 CSS 的网格系统，在前端开发中常常用于页面布局。它可以让开发者方便地创建响应式的布局，使网站在不同的设备上显示效果一致且美观。just-grid-it 采用了 Flexbox 布局，可以让你更加方便地进行布局。
安装 just-grid-it
在使用 just-grid-it 前，需要先进行安装。我们可以通过 npm 来安装 just-grid-it：
npm install just-grid-it
安装完成后，便可以使用 just-grid-it 提供的样式了。
使用 just-grid-it
为了使用 just-grid-it，我们需要在 html 文件中引入 CSS 文件，并给需要布局的元素添加相应的 class 名。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ---- -- ---------------
----- ---------------- -------------------------------------------------------
-------
------
---- ------------------
---- ------------
---- ---------------- -------- ---------------- -------
---- ---------------- -------- ---------------- -------
---- ---------------- -------- ---------------- -------
------
------
-------
-------在这个例子中，我们使用了 container、row、col-sm-12、col-md-6 和 col-lg-4 这些 class。其中，container 和 row 是必须的，其他 class 则用于指定列的长度。使用这些 class 时，需要注意以下几点：
- container：将所有内容包在 container 中，以确保布局的正确性。
- row：将一组列包在 row 中。
- col：指定某个元素应该占的列数。在这里，我们设置了不同的 class，例如 col-sm-12，表示在小屏幕上（<576px）该元素将占满整个屏幕，而在中等屏幕上（≥576px 且 <992px），该元素占 6 列，而在大屏幕上（≥992px），该元素占 4 列。这些 class 名称中的数字表示元素应该占据的列数。
示例代码
接下来，我们来看一个更加复杂的例子。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ---- -- ---------------
----- ---------------- -------------------------------------------------------
-------
------
---- ------------------
---- ------------
---- ---------------- -------- ---------------- -------
---- ---------------- -------- ---------------- -------
------
---- ------------
---- ------------ -------- ---------------- -------
---- ------------ -------- ---------------- -------
---- ------------ -------- ---------------- -------
---- ------------ -------- ---------------- -------
------
---- ------------
---- ----------------------- -------
---- ----------------------- -------
------
------
-------
-------在这个例子中，我们使用了大量的 just-grid-it class，来展示各种不同的布局。
- 在第一行中，我们将页面分割为两列，并使之在不同的屏幕大小上有不同的宽度。
- 在第二行中，我们将页面分割为四列，每一列将占据不同的宽度。
- 最后在第三行中，我们将页面分割为两列，并给它们指定了在大屏幕上的宽度。
结论
使用 just-grid-it 可以轻松地创建响应式的布局。只需要添加相应的 class 名称，就能使元素在不同设备上显示出一致的效果。just-grid-it 并不需要任何 JavaScript，因此它非常容易使用并且可以加速页面加载速度。希望这篇文章能够帮助您更好地使用 just-grid-it，从而在前端开发中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d381e8991b448df152