通过网格区域来控制元素在 CSS Grid 中的位置

CSS Grid 是一种流行的前端布局技术，可用于创建具有复杂网格结构的网页布局。在 CSS Grid 中，网格是由行和列组成的，并且每个元素可以在网格中的任何位置进行定位。通过网格区域可以更好地控制元素在 CSS Grid 中的位置。

什么是网格区域？

网格区域是指由一个或多个网格单元组成的区域。这些网格单元可以是水平和/或垂直方向上的连续单元格，或者是通过使用 grid-area 属性指定的命名单元格。使用网格区域，我们可以更好地控制元素在网格中的位置。

如何使用网格区域？

要在 CSS Grid 中使用网格区域，我们需要使用以下属性：

grid-row-start 和 grid-row-end

这些属性用于指定元素的起始行和结束行。例如，如果要将元素放在第 3 行到第 5 行之间，则应使用以下代码：

.grid-item {
  grid-row-start: 3;
  grid-row-end: 6;
}

grid-column-start 和 grid-column-end

这些属性用于指定元素的起始列和结束列。例如，如果要将元素放在第 2 到第 4 列之间，则应使用以下代码：

.grid-item {
  grid-column-start: 2;
  grid-column-end: 5;
}

grid-row 和 grid-column

这些属性可用于同时指定起始和结束行或列。例如，如果要将元素放在第 3 行和第 4 行之间，第 2 列和第 5 列之间，则应使用以下代码：

.grid-item {
  grid-row: 3 / 5;
  grid-column: 2 / 5;
}

grid-area

这个属性可以直接指定元素应该占用的区域。例如，如果要将元素放在第 3 行和第 4 行之间，第 2 列和第 5 列之间，并将其命名为“my-grid-area”，则应使用以下代码：

.grid-item {
  grid-area: my-grid-area;
}

// javascriptcn.com code example
.grid-item {
  grid-template-areas: 
    "header header header"
    "nav article aside"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.nav {
  grid-area: nav;
}

.article {
  grid-area: article;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
}

结论

通过使用网格区域，我们可以更好地控制元素在 CSS Grid 中的位置。使用 grid-row-start、grid-row-end、grid-column-start、grid-column-end、grid-row、grid-column 和 grid-area 属性可以使我们在网格中更好地定位元素。希望这篇文章能对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67396864317fbffedf16a35c