什么是 CSS Grid 布局？
CSS Grid 布局是一种新型的网格布局方式，它可以让我们更加灵活的控制网页布局。与传统的布局方式相比，CSS Grid 布局可以让我们更加方便的实现复杂的网页布局，并且可以在不同的设备上实现响应式布局。
CSS Grid 布局的使用技巧
1. 使用网格容器
使用网格容器是使用 CSS Grid 布局的第一步。我们可以通过设置一个元素的 display 属性为 grid 或者 inline-grid 来创建一个网格容器。
.container { display: grid; /* or */ display: inline-grid; }
2. 设置网格行和列
在网格容器中，我们可以使用 grid-template-rows 和 grid-template-columns 属性来设置网格的行和列。这两个属性接受一个由空格分隔的值列表，每个值可以是一个长度、百分比或者一个 fr 单位。
.container { display: grid; grid-template-rows: 100px 200px; grid-template-columns: 1fr 2fr; }
上面的代码会创建一个有两行、两列的网格，第一行的高度为 100 像素，第二行的高度为 200 像素，第一列的宽度为第二列宽度的一半。
3. 设置网格单元格
在网格容器中，我们可以使用 grid-row 和 grid-column 属性来设置网格单元格的位置。这两个属性接受一个由空格分隔的值列表，每个值可以是一个数字、关键字或者一个 span 单位。
.item { grid-row: 1 / 2; grid-column: 1 / span 2; }
上面的代码会将 .item 元素放在第一行、第一列，并且跨越两列。
4. 设置网格间距
在网格容器中，我们可以使用 grid-row-gap 和 grid-column-gap 属性来设置网格的行间距和列间距。
.container { display: grid; grid-template-rows: 100px 200px; grid-template-columns: 1fr 2fr; grid-row-gap: 10px; grid-column-gap: 20px; }
上面的代码会创建一个有两行、两列的网格，第一行的高度为 100 像素，第二行的高度为 200 像素，第一列的宽度为第二列宽度的一半，行间距为 10 像素，列间距为 20 像素。
CSS Grid 布局的注意事项
1. 浏览器兼容性
CSS Grid 布局是一个比较新的技术，目前还不是所有的浏览器都支持它。在使用 CSS Grid 布局时，我们需要考虑浏览器的兼容性，可以使用一些 polyfill 或者 fallback 方案来解决兼容性问题。
2. 网格容器的高度
在使用 CSS Grid 布局时，网格容器的高度是由网格的行高和行间距决定的。如果我们没有设置网格的行高或者行间距，那么网格容器的高度将会是 0。因此，在使用 CSS Grid 布局时，我们需要设置网格的行高和行间距，以确保网格容器有一个合适的高度。
3. 网格单元格的跨度
在使用 CSS Grid 布局时，我们可以使用 span 单位来设置网格单元格的跨度。但是，如果我们设置的跨度超过了网格容器的行数或者列数，那么网格单元格将会溢出网格容器。因此，在使用 CSS Grid 布局时，我们需要确保网格单元格的跨度不会超过网格容器的行数或者列数。
示例代码
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------ ------- ---------- - -------- ----- ------------------- ----- ------ ---------------------- --- ---- ------------- ----- ---------------- ----- - ----- - ----------------- ----- -------- ----- - ------------------ - --------- - - -- ------------ - - ---- -- - ------------------ - --------- - - -- ------------ - - -- - ------------------ - --------- - - -- ------------ - - -- - ------------------ - --------- - - -- ------------ - - -- - ------------------ - --------- - - -- ------------ - - -- - ------------------ - --------- - - -- ------------ - - ---- -- - --------展开代码
上面的代码会创建一个有两行、两列的网格，第一行的高度为 100 像素，第二行的高度为 200 像素，第一列的宽度为第二列宽度的一半，行间距为 10 像素，列间距为 20 像素。其中，第一个单元格跨越了两列，第二个单元格位于第二行第一列，第三个单元格位于第二行第二列，第四个单元格位于第三行第一列，第五个单元格位于第三行第二列，第六个单元格跨越了两列。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cbe68fe46428fe9e505c5a
