何谓 CSS Grid 布局
CSS Grid 布局是一种基于网格的布局系统，可以让开发者轻松地构建复杂的网页布局，并实现跨行与跨列的布局效果。相较于传统的布局方式，CSS Grid 布局更加灵活、强大，可以激发前端开发者的无限创意。
如何构建跨行与跨列的网格布局
定义网格
要实现跨行与跨列的网格布局，我们首先需要定义网格。在 CSS Grid 布局中，可以使用 grid-template-columns 和 grid-template-rows 来定义网格。
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
上述代码中，我们定义了一个 grid-container 容器，使用 grid-template-columns 和 grid-template-rows 分别定义了三列和三行。其中，1fr 表示网格的一个单位，等分网格容器的空间，即每列/行占据三分之一。
网格定位
定义好网格后，我们需要确定网格项目的位置。在 CSS Grid 布局中，我们可以使用 grid-column 和 grid-row 属性来设定项目所占据的列和行。
.grid-item { grid-column: 1 / 3; grid-row: 1 / 2; }
上述代码中，我们设定了 .grid-item 元素所占据的列为第一列到第二列，所占据的行为第一行。使用 / 分隔符来表明起始/结束的行列所占据的位置，数字表示对应的列/行数。
跨行与跨列
要实现跨行与跨列的效果，我们只需要通过 grid-column 和 grid-row 属性来设定不同的起始和结束位置即可。
.grid-item { grid-column: 1 / 3; grid-row: 1 / 3; }
上述代码中，我们设定了 .grid-item 元素跨越了第一列到第二列，并且跨越了第一行到第二行。这样就可以实现跨行与跨列的效果了。
示例代码
-- -------------------- ---- ------- ---- ----------------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ------展开代码
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- --- ---- ------------------- --- --- ---- ---- ----- - ---------- - ----------------- ----- -------- ----- ----------- ------- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- -展开代码
示例代码中，我们通过 grid-template-columns 和 grid-template-rows 分别定义了三列和三行，使用 gap 属性设置元素之间的间距。通过 grid-column 和 grid-row 属性来设定元素所占据的行列，实现了跨行与跨列的效果。
总结
CSS Grid 布局是一种强大的布局系统，可以让前端开发者轻松实现网页的复杂布局，同时实现跨行与跨列的效果。通过学习本文介绍的技术，相信读者已经可以在实际开发中应用 CSS Grid 布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a766ac48841e98943e484a
