什么是 grid-lines?
grid-lines 是一个基于 CSS Grid 实现的网格系统库，可以帮助开发者更快速、更方便地实现网页布局。
快速上手
使用 grid-lines 很简单，只需按照以下步骤：
- 安装：在命令行中输入以下指令进行安装。
npm install grid-lines
- 引入：在需要使用
grid-lines的页面中引入grid-lines。
<link rel="stylesheet" href="/node_modules/grid-lines/grid-lines.min.css">
- 使用：在需要使用网格系统的元素上添加
gl-[n]类名，其中[n]为网格数。
<div class="gl-12"> <div class="gl-4">1</div> <div class="gl-4">2</div> <div class="gl-4">3</div> </div>
通过以上三个步骤，就可以快速上手 grid-lines 。
深度学习
网格数
在使用 grid-lines 时，需要先确定网格数。网格数指将整个页面或某一区域分成几等分。在 grid-lines 中，默认提供了一些常用的网格数。
-- -------------------- ---- ------- -- -------- -- ----- - ---------------------- --------- ----- - ----- - ---------------------- --------- ----- - ----- - ---------------------- --------- ----- - ----- - ---------------------- --------- ----- - ----- - ---------------------- --------- ----- - ----- - ---------------------- --------- ----- - ----- - ---------------------- --------- ----- - ----- - ---------------------- --------- ----- - ------ - ---------------------- ---------- ----- -
也可以手动定义网格数。
/* 手动定义网格数 */
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr); /* 将该元素分成12等分 */
}网格行列
在网格系统中，还有网格行列的概念。网格行列是指网格数中的每一行和每一列。在定义网格行列时，需要使用 grid-row 和 grid-column 属性。
<div class="grid"> <div class="item" style="grid-row: 1 / 3; grid-column: 1;">A</div> <div class="item" style="grid-row: 2; grid-column: 2;">B</div> <div class="item" style="grid-row: 2 / span 2; grid-column: 3;">C</div> <div class="item" style="grid-row: 3; grid-column: 4;">D</div> </div>
其中，grid-row 可以定义从哪一行开始到哪一行结束，类似地，grid-column 可以定义从哪一列开始到哪一列结束，这样就可以实现复杂的网格布局。
响应式布局
grid-lines 还提供了响应式布局的功能。通过 grid-gl 类名，可以让网格系统根据屏幕宽度自动适配。
<div class="gl-2 grid-gl-768"> <div class="item"></div> <div class="item"></div> </div>
在以上代码中，.gl-2 表示在屏幕宽度大于等于 768px 时分成两等分，.grid-gl-768 则表示在屏幕宽度小于 768px 时改为以行作为等分对象。
示例代码
以下代码演示了 grid-lines 的基本用法。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
----- ---------------- --------------------------------------------------
-------
----- -
-------- -----
---------------------- ---------- -----
--------- -----
-
----- -
----------------- -----
------ -----
----------- -------
------------ ------
---------- -----
-
----- ----- - ------- ------ -
----- ----- - ------- ------ -
----- ----- - ------- ----- -
----- ----- - ------- ----- -
------ ----- - ------- ----- -
--------
-------
------
----------------
---- -------------
---- ----------- -------------
---- ----------- -------------
---- ----------- -------------
---- ----------- -------------
---- ----------- -------------
---- ----------- -------------
---- ----------- -------------
---- ----------- -------------
---- ----------- -------------
---- ----------- --------------
---- ----------- --------------
---- ----------- --------------
---- ------------ --------------
---- ------------ --------------
---- ------------ --------------
------
-------
-------结语
本篇文章介绍了 grid-lines 的基本用法和一些进阶功能，希望可以帮助到大家。网格系统可以帮助开发者更快速、更方便地实现网页布局，让前端开发变得更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c981e8991b448e8f66