---

CSS grid-area属性

CSS grid-area属性用于定义一个或多个网格项目，并将它们放置在网格布局中的指定区域内，它是CSS Grid布局中的一个重要属性之一。

定义

grid-area是grid-template-areas属性的一部分，它定义了在网格布局中每个grid-area的名称、位置和范围。 grid-area的语法如下：

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

如果希望将多个网格项目组合在一个区域中，则可以使用相同的grid-area名称来定义它们的区域。每个网格项目的实际大小取决于它们的内容和位置。

值

grid-row-start和grid-row-end值确定了网格项目所占用的网格行数，grid-column-start和grid-column-end值则确定了网格项目所占用的网格列数。

以下是可能的值：

• 数字：指定网格行或网格列的序号。
• 关键字：指定网格行或网格列的名称（必须与grid-template-rows或grid-template-columns中定义的名称匹配）。
• span ：指定网格项目所占用的网格行或网格列的数量。
• span ：指定网格项目所占用的网格行或网格列的数量，这些行或列确定为自动跨度。

这些值通常使用斜杠(/)来分隔。

例子

下面是一个使用 grid-area 属性的简单例子：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 100px 200px 100px;
  grid-gap: 10px;
}

.item1 {
  grid-area: 1 / 1 / 3 / 4;
}

.item2 {
  grid-area: 2 / 2 / 4 / 4;
}

在上面的例子中，我们定义了一个具有三列和三行的网格布局，每个网格之间的间距为10像素。我们还为第一个网格项目定义了一个名称为item1的网格区域，该项目跨越从第1行到第3行和从第1列到第4列的所有网格。我们还为第二个网格项目定义了一个名称为item2的网格区域，该项目跨越从第2行到第4行和从第2列到第4列的所有网格。

这些区域定义的网格项目将按照网格区域的定义进行放置。这些区域的大小有它们内部内容的大小决定。

总结

CSS grid-area属性可以将网格项目放置在不同的区域里，可以指定每个网格项目所在的行和列、跨度和名称。在使用这个属性时，需要注意定义网格布局的行和列，以确保网格项目在指定的网格区域内正确放置。在使用 CSS Grid 布局时，grid-area是一个非常有用的属性，可以使网页在布局上更加灵活、直观。