CSS Grid 是一种相对新的前端布局方式，相较于传统的浮动和定位布局，它具有更加灵活和精细的定位能力，可以轻松处理复杂的页面布局。但是，在使用 CSS Grid 进行布局时，子元素的定位问题是一个需要特别注意的问题。
Grid 布局的基础
在使用 Grid 进行布局时，我们需要首先定义一个网格容器（Grid Container），并为该容器指定一些基本属性。比如，我们可以为一个 div 元素设置 display: grid，这个 div 元素就成为了一个网格容器：
.container {
display: grid;
}接下来，我们需要定义该网格容器内部的网格线（Grid Line）。Grid 网格是由一系列横向和纵向的网格线围成的一个矩形网格区域。我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义这些网格线：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}上面的代码定义了一个 3x3 的网格，每个格子的宽高都是 100px。
在网格容器内部，我们可以为每个子元素指定一个位置（Grid Area），这个位置就是由网格线围成的一个矩形区域。我们可以使用 grid-row 和 grid-column 属性来指定子元素所在的位置：
.item {
grid-row: 1 / 3;
grid-column: 1 / 3;
}上面的代码将 .item 元素放置在了第 1 行、第 2 行和第 1 列、第 2 列之间的矩形区域内。
子元素的定位问题
在使用 Grid 进行布局时，我们有时会遇到子元素的定位问题。比如，我们希望一个子元素只占据部分网格，或者我们希望多个子元素处于同一个网格中。
使用 grid-row-start 和 grid-row-end
我们可以使用 grid-row-start 和 grid-row-end 属性来指定一个子元素所占据的行数。比如，我们可以让一个子元素从第 2 行开始，并占据 2 行：
.item {
grid-row-start: 2;
grid-row-end: 4;
}上面的代码将 .item 元素放置在了第 2 行和第 3 行之间。
使用 grid-column-start 和 grid-column-end
我们可以使用 grid-column-start 和 grid-column-end 属性来指定一个子元素所占据的列数。比如，我们可以让一个子元素从第 2 列开始，并占据 2 列：
.item {
grid-column-start: 2;
grid-column-end: 4;
}上面的代码将 .item 元素放置在了第 2 列和第 3 列之间。
使用 grid-area
我们也可以使用 grid-area 属性来指定一个子元素所占据的位置。grid-area 属性接受 4 个值，分别表示起始行、起始列、结束行、结束列。比如，我们可以让一个子元素占据第 2 行到第 3 行，第 2 列到第 4 列的区域：
.item {
grid-area: 2 / 2 / 4 / 4;
}上面的代码将 .item 元素放置在了第 2 行和第 3 行之间，第 2 列和第 3 列之间的矩形区域内。
处理子元素定位的冲突问题
在使用 Grid 进行布局时，我们可能会遇到多个子元素同时指定了同一个位置的情况。比如，下面的代码中，.item-1 和 .item-2 同时指定了第一行第一列的位置：
-- -------------------- ---- ------- ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- -
这种情况下，这两个子元素之间就会发生位置冲突。我们可以使用 z-index 属性来处理这个冲突。使用较高的 z-index 值可以让子元素覆盖在低 z-index 值的子元素上：
-- -------------------- ---- ------- ------- - --------- - - -- ------------ - - -- -------- -- - ------- - --------- - - -- ------------ - - -- -------- -- -
这样，.item-2 就会覆盖在 .item-1 上方。
总结
CSS Grid 是一种非常强大的前端布局方式，它的定位能力可以轻松处理复杂的页面布局。但是，在使用 CSS Grid 进行布局时，子元素的定位问题是一个需要特别注意的问题。我们可以使用 grid-row、grid-column 和 grid-area 属性来指定子元素的位置，使用 z-index 属性处理位置冲突问题。掌握这些技巧，可以让我们更加灵活地使用 CSS Grid 进行布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b9e71fadd4f0e0ff272157