CSS Grid 是一种强大的布局方式，它可以让我们更轻松地创建复杂的布局。本文将分享 11 个实用技巧，帮助你更好地掌握 CSS Grid 布局。
1. 使用 grid-template-areas 管理布局
grid-template-areas 可以帮助我们更好地管理布局，它可以让我们使用字符串来定义网格区域。例如：
.container { display: grid; grid-template-areas: 'header header' 'sidebar content'; }
这将创建一个两行两列的网格，第一行包含一个 header 区域，第二行包含一个 sidebar 区域和一个 content 区域。我们可以将元素在 HTML 中命名为相应的区域：
<div class="container"> <header class="header">Header</header> <div class="sidebar">Sidebar</div> <div class="content">Content</div> </div>
然后我们可以使用 grid-area 属性来将元素放置在相应的区域中：
-- -------------------- ---- ------- ------- - ---------- ------- - -------- - ---------- -------- - -------- - ---------- -------- -展开代码
2. 使用 grid-template-columns 和 grid-template-rows 定义网格行列
grid-template-columns 和 grid-template-rows 可以帮助我们定义网格的行和列。例如：
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 2fr; }
这将创建一个两行三列的网格，第一行有三个列，分别占据了 1/4、1/2、1/4 的空间；第二行有两行，分别占据了 1/3 和 2/3 的空间。
3. 使用 grid-gap 来设置网格之间的间距
我们可以使用 grid-gap 属性来设置网格之间的间距。例如：
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 2fr; grid-gap: 10px; }
此时，网格之间会有 10 像素的间隔。
4. 使用 grid-auto-rows 和 grid-auto-columns 自动设置网格行列大小
grid-auto-rows 和 grid-auto-columns 可以帮助我们自动设置网格行列的大小。例如：
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 2fr; grid-auto-rows: 50px; grid-auto-columns: 100px; }
这将创建一个两行三列的网格，其中前两行根据 grid-template-columns 和 grid-template-rows 定义了大小，而后面的行列根据 grid-auto-rows 和 grid-auto-columns 自动设置大小。
5. 使用 grid-column 和 grid-row 来定位网格元素
我们可以使用 grid-column 和 grid-row 属性来定位网格元素。例如：
.item { grid-column: 2 / 4; grid-row: 1 / 2; }
这将把元素放在第一行的第二列到第四列之间。
6. 使用 justify-items 和 align-items 属性调整网格元素对齐方式
我们可以使用 justify-items 和 align-items 属性来调整网格元素的水平和垂直对齐方式。例如：
.container { display: grid; justify-items: center; align-items: center; }
这将把网格元素在水平和垂直方向上都居中对齐。
7. 使用 justify-content 和 align-content 调整网格的水平和垂直对齐方式
justify-content 和 align-content 属性可以帮助我们调整网格的水平和垂直对齐方式。例如：
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 2fr; justify-content: center; align-content: center; }
这将使整个网格在水平和垂直方向上都居中对齐。
8. 使用 grid-template-rows 定义网格高度
我们可以使用 grid-template-rows 来定义网格的高度。例如：
.container { display: grid; grid-template-rows: 100px 200px 100px; }
这将创建一个三行一列的网格，每一行的高度分别为 100、200 和 100 像素。
9. 使用 grid-template-columns 定义网格宽度
我们可以使用 grid-template-columns 来定义网格的宽度。例如：
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; }
这将创建一个一行三列的网格，每一列的宽度分别占据网格宽度的 1/4、1/2、1/4。
10. 使用 grid-auto-flow 属性控制自动布局
grid-auto-flow 属性可以帮助我们控制自动布局。例如：
.container { display: grid; grid-template-columns: 1fr 2fr; grid-auto-flow: row dense; }
这将创建一个两行两列的网格，第一行占据了网格的第一列和第二列，第二行占据了第一列。dense 属性告诉网格布局尽可能的填充空白区域。
11. 当需要支持 IE 即以下的版本时，考虑使用 Autoprefixer
如果你需要支持 IE 即以下的版本，你可以使用 Autoprefixer 来自动生成兼容性的 CSS，并且不需要手动添加前缀。例如：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- ------------------- --- ---- --------- ----- ---------------- ------- -------------- ------- --------------- --- ------ --------------- ----- ------------------ ------ -展开代码
运行 Autoprefixer 后，会自动添加兼容 IE 的前缀，生成如下 CSS：
-- -------------------- ---- ------- ---------- - -------- --------- -------- ----- ----------------- --- ---- --- ---- ---- ---------------------- --- --- ---- -------------- --- ---- ---- ------------------- --- ---- --------- ----- ------------------- ------- ---------------------- ------- ---------------- ------- -------------- ------- -------------- --- ------ --------------- --- ------ --------------- ----- ------------------ ------ -展开代码
在使用的时候，如果遇到兼容性问题，可以使用 Autoprefixer 来解决。
以上是 CSS Grid 布局的 11 个实用技巧，希望对你学习和掌握 CSS Grid 布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c87542e46428fe9ef01790
