前端开发过程中，布局一直是个重要的问题。随着页面内容越来越多，分页式布局的需求也越来越高。今天，我们来讲解如何利用 CSS Grid 实现分页式布局。
什么是 CSS Grid？
CSS Grid 是 CSS 的一种布局模块，在现代浏览器（包括 IE11）中得到支持。它提供了一个二维的网格系统，可以用来创建复杂的布局结构，这些结构可以适应各种屏幕大小。
如何实现分页式布局
创建网格容器
首先，需要创建一个网格容器。可以在任何 HTML 元素上设置 display: grid 属性，使其变成网格容器。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 300px;
grid-gap: 20px;
}这里我们创建一个名为 .wrapper 的网格容器，它被分成了 3 列，每列的宽度都是相等的（1fr）。每个网格行的高度被设置为 300px，各个网格之间的间隔为 20px。
填充网格项
接下来，创建网格项填充网格容器。可以使用子元素来创建网格项。
-- -------------------- ---- -------
---- ----------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------这里创建了 9 个网格项，它们自动填充网格容器。
定义分页
接下来，我们需要定义网格项之间的分页。可以使用 grid-row-start 和 grid-row-end 属性来定义行之间的间隔。
-- -------------------- ---- -------
------------------ - -- -
--------------- --
------------- --
-
------------------ - -- -
--------------- --
------------- --
-
------------------ - -- -
--------------- --
------------- --
-这里我们定义了每个网格项的行起始位置和行结束位置，从而定义了它们之间的间隔。
完成布局
最后，加上一些 CSS 样式，使得分页式布局更加完美。
-- -------------------- ---- -------
-------- -
-------- -----
---------------------- --------- -----
--------------- ------
--------- -----
---------------- -------
-
----- -
----------------- --------
-------- -----
---------------- -------
------------ -------
---------- -----
------------ -----
-这里我们添加了一些样式，让分页式布局更加美观。
总结
CSS Grid 是十分强大的网格布局系统，可以帮助我们轻松地创建各种布局结构。在这里，我们演示了如何使用 CSS Grid 创建分页式布局，并解释了如何定义网格项之间的分页。希望本文可以对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476ac16968c7c53b035406c