CSS Grid 是可用于创建复杂布局的功能强大的 CSS 模块。借助 CSS Grid，可以将页面拆分为行和列，并使用这些行和列创建响应式布局。CSS Grid 实现了强大的自定义定位和对齐，使得进行响应式布局变得更加容易。
本文将会详细介绍 CSS Grid 容器及其项目的概念以及如何利用这些概念创建灵活的布局。
CSS Grid 容器
CSS Grid 容器是一个父元素，用于包含 Grid 布局的多个项目。使用 display: grid; 可以将元素设置为 Grid 容器。在 Grid 容器中，一旦定义了列和行的轨道，那么项目就会自动向这些轨道进行定位。
定义列和行
Grid 容器中可以通过 grid-template-columns 和 grid-template-rows 属性来定义列和行的轨道。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}例如，上述代码将会创建一个 3 x 3 的网格，其中每个单元格的宽度和高度都会根据可用宽度自动缩放。
列和行的计量单位
Grid 中的列和行通过计量单位来指定它们的大小。以下是常用的计量单位：
- 百分比（%）：相对于父元素的宽度或者高度。
- fr：与可用空间相关的单位。
- min-content 和 max-content：基于内容确定大小的单位。
- repeat：重复一组值多次。
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr 1fr min-content;
grid-template-rows: 50px repeat(3, minmax(100px, auto));
}上述代码中，第 1 列宽度为 100px，第 2 列占据了可用空间的 1/3，第 3 列占据了可用空间的 2/3，第 4 列宽度为能容纳其中内容的最小宽度，第 5 行的高度为能容纳其中的内容的最小高度，第 2-4 行的高度则为最大高度为 100px，最小高度为自动的高度。
列和行的间距
可以通过 grid-column-gap 和 grid-row-gap 属性来定义列和行之间的间距。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 20px;
}上述代码将会创建一个 3 x 3 的网格，其中每个单元格的宽度和高度都会根据可用宽度自动缩放，每一行之间的间隔为 20px，每一列之间的间隔为 10px。
CSS Grid 项目
CSS Grid 项目是 Grid 容器中的子元素，它们会基于 Grid 容器的列和行进行定位。可以使用以下属性来控制项目的位置：
- grid-column-start 和 grid-column-end：指定项目开始和结束的列位置。
- grid-row-start 和 grid-row-end：指定项目开始和结束的行位置。
- grid-column 和 grid-row：可以同时定义开始和结束的位置。
- grid-area：可以同时定义开始和结束的位置。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ---------------- ----- ------------- ----- - ----- - ------------------ -- ---------------- -- --------------- -- ------------- -- -
上述代码中，.item 会占据从第 1 列到第 3 列和从第 1 行到第 3 行的区域。
重复和自动的网格线
可以使用重复和自动的网格线来定义项目的位置和网格线的位置，这是一种简化 Grid 的方法。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ---------------- ----- ------------- ----- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - --- -
上述代码中，.item-a 占据了 1-2 列和 1 行的区域，.item-b 占据了 2-3-4 列和 2-3 行的区域，.item-c 占据了第 1 行到最后一行和第 1 列到最后一列的区域。
CSS Grid 的使用
借助 CSS Grid，可以实现各种各样的页面布局和设计。以下是两个使用 CSS Grid 实现的页面布局示例：
等宽等高的网格布局
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ---------------- ----- ------------- ----- - ----- - ----------------- ----- -------- ----- ---------------- ------- ------------ ------- -
上述代码中创建了一个 3 x 3 的等宽等高的网格布局，每个单元格的宽度和高度都会根据可用宽度自动缩放。
自适应的网格布局
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ---------------- ------------- ------ ---------------- ----- ------------- ----- - ----- - ----------------- ----- ------- ------ -
上述代码中创建了一个自适应的网格布局，每个单元格宽度最小为 200px，最大为可用宽度，每个单元格高度为 200px。
总结
CSS Grid 是一个非常有用的 CSS 模块，可以用于创建复杂的网页布局。通过理解 Grid 容器和项目的概念，可以使页面设计变得更加灵活和响应式。借助 CSS Grid，可以实现许多有趣的布局设计，从而创造更加引人入胜的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648185e548841e98940fea9a