CSS Grid 是一种强大的布局工具，它能够让前端开发者更加自由地设计和实现网页布局。CSS Grid 最初在 2017 年被推出，它不仅能够代替传统的 float 和 clear 布局方式，还能更好地应对多维度布局。
Grid 布局基础
在使用 Grid 布局前，有几个概念需要掌握。
- 网格容器：设置为
display: grid的元素，它包含了网格项目(网格区域)组成的二维网格，并且可以控制网格的大小、间距和流程(Density and Flow)。
.container {
display: grid; /* 设置为 Grid 网格容器 */
}- 网格项目：Grid 网格容器内部的元素，根据 Grid 的定义，它们可以定位于网格容器的任何网格中。网格项可以跨越多个网格，包括单元格、行和列。
.item {
grid-row: 1 / 3; /* 定义网格行的位置 */
grid-column: 2; /* 定义网格列的位置 */
}- 网格轨道：横向或纵向的线，构成了网格的框架。可以通过设置
grid-rows和grid-columns来定义轨道数量和大小。
.container {
grid-template-rows: repeat(3, 1fr); /* 设置三个等分的轨道（每个轨道高度为相等的 1fr） */
grid-template-columns: repeat(4, 1fr); /* 设置四个等分的轨道（每个轨道宽度为相等的 1fr） */
}使用 Grid 实现复杂布局
在实际应用中，Grid 布局还可组合使用，以实现更复杂的布局。
例如，下面是一个简单的网格容器和其中的三个网格项目。
<div class="grid-container"> <div class="item-a"></div> <div class="item-b"></div> <div class="item-c"></div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- --------- ----- - ------- - ------------ - - -- --------- -- - ------- - ------------ - - -- --------- -- - ------- - ------------ -- --------- - - -- -
上面的例子中，我们使用 grid-template-columns 和 grid-template-rows 定义了一个三行两列的网格布局，具体为每一列或行分别定义了一个同等份的空间。然后我们使用 grid-column 和 grid-row 来定义三个网格项目的位置和跨度。最后，我们使用了 grid-gap 去控制网格间的间距。
Grid 布局进阶
1. 使用 grid-template-areas 布局
除了使用 grid-row 和 grid-column 定义网格项目的位置之外，Grid 布局还提供了 grid-template-areas 属性以区分网格项目及其区域。
-- -------------------- ---- -------
---------- -
-------- -----
------------------- --------- -----
---------------------- --------- -----
--------------------
------- ------ -------
----- ---- --------
------- ------ --------
-
----- -
---------- ------- -- ----------- --
-上面的例子中，我们可以将网格容器分为三行三列，并为每个区域定义名字，最后使用 grid-template-areas 来描述区域。然后，我们可以通过 grid-area 属性为具体的网格项目指定一个区域。
2. 使用 grid-template 布局
grid-template 是 grid-template-rows、grid-template-columns 和 grid-template-areas 的一个组合，它非常适合定义简单且规律化的布局。
-- -------------------- ---- ------- ---------- - -------- ----- -------------- ---- ---- - ----- ---- - ----- - ------------ -- --------- - - ---- -- -
在上面的例子中，我们使用了 grid-template 定义了一个具有两行和两列的网格布局。第一行高度为 50px，第二行则相对与第一行而言，能够自动占满剩余高度。第一列宽度为 200px, 第二列宽度为剩余空间。
3. 控制网格大小和流程
通过 grid-auto-rows 和 grid-auto-columns，你可以设置那些没有在 grid-template-rows 和 grid-template-columns 中显式定义的网格行和列的大小。
.container {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-auto-rows: 200px;
grid-auto-columns: 150px;
}通过设置这些属性，如果没有定位到特定网格块的位置，网格行和列将自动指定为这些值。
另外，在多个元素具有相同的网格位置时，网格容器的替换流顺序通常就是在 HTML 中定义的顺序。通过指定 grid-auto-flow: column，grid-auto-flow: row 和 grid-auto-flow: dense 属性可改变流程方式。
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------ ---------------------- --------- ----- --------------- ----- - ----- - ------------ -- --------- -- -
在上例中，由于第一个网格项将第一行和第一列占满，第二个网格项必须向下移动到第二行。但是，由于第三个元素的大小只占一个网格（50px），因此它可以默认与第二个元素位于同一行，如下所示：
总结
CSS Grid 格式化布局是前端开发者一个非常强大的布局工具，允许开发者以一种自由灵活的方式布局网页内容。本文介绍了如何使用 CSS Grid 布局，从基础的网格和网格项目到复杂的布局技巧和进阶技术。希望它对你对前端开发工作有所帮助。
最后，分享一些 Grid 布局实用的资源：
- Grid By Example：CSS Grid 示例和文档
- CSS-Tricks' Complete Guide to Grid：CSS-Tricks 的 Grid 全面指南
- Grid Garden：以游戏方式来学习 Grid
- Designing with Grid：来自 Google 的 Grid 视频教程
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65219cf495b1f8cacd9155ef