近年来，越来越多的网站采用了格子截断的布局，这种布局可以让网页看起来更加干净、整洁，同时也增强了页面的可读性。那么如何使用 CSS Grid 实现格子截断布局呢？本文将为大家详细讲解。
什么是格子截断布局
格子截断布局是一种将图像或文本内容按照网格分布展示的布局方式。每一个格子可以放置不同的内容，同时也可以有不同的间距和边框。
创建网格容器
首先，我们需要创建一个 div 元素作为网格容器，可以给它一个类名或者 ID，这样就可以通过 CSS 选择器来访问它。
<div class="container"></div>
然后，在 CSS 中定义该容器为一个网格容器，使用 display: grid 属性。如下：
.container { display: grid; }
创建网格列和行
接下来，我们需要为网格容器创建列和行，这可以通过 grid-template-columns 和 grid-template-rows 属性来实现。
比如，我们要在容器中创建两列和三行，可以按照以下方式设置：
.container { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
上述代码中，1fr 表示 1 个比例单元，repeat(n, unit) 表示重复 n 次单位 unit。
填充网格
创建网格列和行之后，我们需要为每个单元格填充内容。我们可以为每个单元格创建一个子元素，并通过使用 grid-column 和 grid-row 属性来将它们放置在正确的位置。
例如，下面是将网格的第 1 行第 1 列格子填充为红色的代码：
<div class="container"> <div class="cell cell-1-1"></div> </div>
.cell-1-1 { background-color: red; grid-column: 1 / 2; grid-row: 1 / 2; }
上述代码中，grid-column: 1 / 2 和 grid-row: 1 / 2 分别表示该单元格位于第 1 行第 1 列。
格子截断效果
为了展现格子截断的效果，我们可以将某些单元格拆分为多个单元格，达到格子截断的效果。
比如，我们可以把第 2 行第 2 列的单元格拆分为 4 个小格子，如下所示：
-- -------------------- ---- ------- ---- ------------------ ---- ----------- ---------------- ---- ----------- ---------------- ---- ----------- ---------------- ---- ----------- ---------------- ---- ----------- ---------------- ---- ----------- ---------------- ---- ----------- ---------------- ---- ----------- ---------------- ---- ----------- ---------------- ------展开代码
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- - --------- - ----------------- ---- ------------ - - -- --------- - - -- - --------- - ----------------- ----- ------------ - - -- --------- - - -- - --------- - ----------------- ------- ------------ - - -- --------- - - -- - --------- - ----------------- ------ ------------ - - -- --------- - - -- ------- ------ -- ----------- -- - --------- - ----------------- ------- ------------ - - -- --------- - - -- - --------- - ----------------- ----- ------------ - - -- --------- - - -- - --------- - ----------------- ----- ------------ - - -- --------- - - -- - --------- - ----------------- ------- ------------ - - -- --------- - - -- - --------- - ----------------- ------ ------------ - - -- --------- - - -- -展开代码
上述代码中，我们将第 2 行第 2 列的单元格 cell-2-2 的高度设置为 120px，从而实现了格子截断的效果。
总结
上文介绍了 CSS Grid 如何实现格子截断布局，通过使用 grid-template-columns 和 grid-template-rows 属性来为网格容器创建列和行，而通过 grid-column 和 grid-row 属性将子元素放置在网格中的正确位置，从而创建出具备格子截断效果的网格布局。
通过学习这种布局方式，我们可以更加灵活地设计网页布局，同时也能够提高网页的可读性和美观程度。欢迎大家尝试实现自己的网格布局效果！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6477cab9968c7c53b042552e
