在前端开发中，经常需要用到布局方案。在传统的开发中，我们可能会借助网格系统来实现页面布局。但是，这种方式存在一些弊端，比如在响应式布局中，需要维护多个网格系统；在复杂页面中，需要手写大量 CSS 样式。
近年来，随着前端技术的不断发展，成熟的方案如 flexbox、grid layout 等得到了广泛的应用。而 npm 包 grid-like 则为我们提供了一种快速、简单地使用 grid layout 的方式。本文就来介绍一下如何使用 grid-like 实现我们的页面布局。
安装
首先，我们需要在项目中安装 grid-like。
npm install grid-like --save
使用
使用 grid-like 非常简单。我们只需要在 HTML 文件中引用 CSS 文件，并为元素添加对应的类名即可。
首先，让我们来看一下最基本的使用。假设我们需要将页面分为两列，左侧占 30%，右侧占 70%。我们可以这样写：
<div class="grid-container">
<div class="grid-item grid-item-3">
<!-- 左侧内容 -->
</div>
<div class="grid-item grid-item-7">
<!-- 右侧内容 -->
</div>
</div>其中，.grid-container 类表示容器，.grid-item 类表示子元素。.grid-item-3 和 .grid-item-7 分别表示左侧元素占 30% 的宽度，右侧元素占 70% 的宽度。
接下来，我们将介绍更多使用方式。
网格布局
grid-like 支持传统的网格布局方式。假设我们需要实现一个网格，显示 4 个商品，每个商品占据 1/4 的宽度。我们可以这样写：
-- -------------------- ---- -------
---- --------------------- -----------------------
---- ---------------- ------------ -------------- -------------- ----------------
---- -- - ---
------
---- ---------------- ------------ -------------- -------------- ----------------
---- -- - ---
------
---- ---------------- ------------ -------------- -------------- ----------------
---- -- - ---
------
---- ---------------- ------------ -------------- -------------- ----------------
---- -- - ---
------
------其中，.grid-container-gutter 表示启用了外边距。.grid-item-sm-3 表示在手机屏幕下占 1/3 的宽度，.grid-item-md-4 表示在平板和桌面屏幕下占 1/4 的宽度，.grid-item-lg-6 表示在大屏幕下占 1/6 的宽度。
不规则网格布局
grid-like 还支持不规则的网格布局方式。假设我们需要实现一个不规则的网格，显示 9 个商品，其中第 2、3、4、6、7、8 个商品需要占用 2 个网格，其余商品占用一个网格。我们可以这样写：
-- -------------------- ---- -------
---- --------------------- -----------------------
---- ---------------- ------------ -------------- -------------- --------------- -----------------
---- -- - ---
------
---- ---------------- ------------ -------------- -------------- --------------- -----------------
---- -- - ---
------
---- ---------------- ------------ -------------- -------------- --------------- -----------------
---- -- - ---
------
---- ---------------- ------------ -------------- -------------- --------------- -----------------
---- -- - ---
------
---- ---------------- ------------ -------------- -------------- --------------- -----------------
---- -- - ---
------
---- ---------------- ------------ -------------- -------------- --------------- -----------------
---- -- - ---
------
---- ---------------- ------------ -------------- -------------- --------------- -----------------
---- -- - ---
------
---- ---------------- ------------ -------------- -------------- --------------- -----------------
---- -- - ---
------
---- ---------------- ------------ -------------- -------------- --------------- -----------------
---- -- - ---
------
------其中，.grid-item-row-x 和 .grid-item-col-x 分别表示元素在网格布局中所占的行数和列数。
嵌套布局
在实际开发中，我们可能需要在一个子元素中再次使用 grid-like。此时，我们可以使用嵌套布局的方式来实现。
假设我们需要实现一个嵌套布局，左侧显示 1 个图片，右侧显示 3 个图片。右侧的三个图片需要分别在一行、两行、三行中分布。我们可以这样写：
-- -------------------- ---- -------
---- --------------------- -----------------------
---- ---------------- -------------
---- -------------------- -------
------
---- ---------------- -------------
---- -----------------------
---- ---------------- ------------ -----------------
---- ----------------------- -------
------
---- ---------------- ------------ ----------------
---- ----------------------- ---
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------