CSS Grid 布局是一种新的、强大的布局方式，它可以帮助我们轻松地创建复杂的网格布局，而不需要使用复杂的 CSS 或 JavaScript。在本文中，我们将深入探讨 CSS Grid 布局的基础知识，包括如何定义网格、如何放置项目以及如何调整网格布局。
定义网格
定义一个网格布局需要两个步骤：定义网格容器和定义网格项目。
定义网格容器
在 CSS Grid 布局中，我们使用 display: grid 来定义一个网格容器。例如，下面的代码将创建一个包含两行和三列的网格容器：
.container { display: grid; grid-template-rows: 100px 200px; grid-template-columns: 1fr 2fr 1fr; }
在上面的代码中，我们使用 grid-template-rows 定义了两行，分别为 100px 和 200px。我们还使用 grid-template-columns 定义了三列，分别为 1fr、2fr 和 1fr。fr 是一个相对长度单位，表示等分剩余空间的比例。
定义网格项目
在网格容器中，我们可以使用 grid-row 和 grid-column 属性来定义网格项目的位置。例如，下面的代码将创建一个占据第一行第一列和第二行第二列的网格项目：
.item { grid-row: 1 / 3; grid-column: 1 / 3; }
在上面的代码中，我们使用 grid-row 定义了网格项目的行位置，值为 1 / 3 表示该项目占据第一行和第二行。我们还使用 grid-column 定义了网格项目的列位置，值为 1 / 3 表示该项目占据第一列和第二列。
放置项目
在 CSS Grid 布局中，我们可以使用 grid-area 属性来定义网格项目的位置和大小。例如，下面的代码将创建一个占据第一行第一列和第二行第二列的网格项目，宽度为 100px，高度为 200px：
.item { grid-area: 1 / 1 / 3 / 3; width: 100px; height: 200px; }
在上面的代码中，我们使用 grid-area 定义了网格项目的位置和大小，值为 1 / 1 / 3 / 3 表示该项目占据第一行和第二行、第一列和第二列。我们还使用 width 和 height 属性定义了网格项目的宽度和高度。
调整网格布局
在 CSS Grid 布局中，我们可以使用多种属性来调整网格布局，包括：
grid-template-rows和grid-template-columns：定义网格的行和列。grid-template-areas：定义网格的区域。grid-row-gap和grid-column-gap：定义网格行和列之间的间距。grid-auto-rows和grid-auto-columns：定义未被显式定义的网格行和列的大小。grid-auto-flow：定义未被显式定义的网格项目的放置方式。
例如，下面的代码将创建一个包含两行和三列的网格布局，并将第一行和第二行分别命名为 header 和 content：
.container { display: grid; grid-template-rows: [header] 100px [content] auto; grid-template-columns: 1fr 2fr 1fr; grid-template-areas: "header header header" "sidebar content main"; }
在上面的代码中，我们使用 grid-template-rows 和 grid-template-columns 定义了网格的行和列，使用 grid-template-areas 定义了网格的区域。我们还使用了一些命名网格线来更好地控制网格布局。
示例代码
下面是一个完整的 CSS Grid 布局示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- --------------------------- ---- ----------------------------- ---- ----------------------------- ---- ----------------------- ------ ------- ---------- - -------- ----- ------------------- -------- ----- --------- ----- ---------------------- --- --- ---- -------------------- ------- ------ ------- -------- ------- ------ ------------- ----- ---------------- ----- - ------- - ---------- ------- ----------------- -------- - -------- - ---------- -------- ----------------- -------- - -------- - ---------- -------- ----------------- -------- - ----- - ---------- ----- ----------------- -------- - --------展开代码
在上面的代码中，我们使用了 CSS Grid 布局来创建一个包含四个网格项目的网格布局。我们还使用了一些属性来调整网格布局，包括 grid-row-gap 和 grid-column-gap 属性来定义网格行和列之间的间距。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd50e5e46428fe9e6d1cd6
