CSS | grid-area 属性

介绍

grid-area 是 CSS 中的一个属性，它用于指定一个 grid item 所占据的区域。一个 grid item 可能会占据一个或多个单元格，而每个单元格都有一个 grid area。通过 grid-area 属性，我们可以为 grid item 指定它所占据的 grid area，从而控制布局。

用法

基本用法

grid-area 的语法如下：

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

其中，row-start 和 column-start 指定 grid item 开始的行和列，对应的值为一个数字或关键字。row-end 和 column-end 则指定 grid item 结束的行和列，同样对应数字或关键字。

以下是一个例子，演示如何使用 grid-area 属性为 grid item 指定一个固定大小的区域：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
}

.grid-item {
  grid-area: 1 / 1 / 2 / 2;
}

在这个例子中，.grid-container 是一个带有四个单元格的网格，每个单元格大小相同，它们之间有 10px 的间隙。.grid-item 是一个 grid item，通过 grid-area 属性，我们将它放置在第一行第一列并占据一个单元格。

关键字用法

除了数字外，我们还可以使用关键字来指定 row-start、column-start、row-end 和 column-end 的值。以下是可能的关键字：

• row-start 和 row-end
  • auto：自动放置，由网格自动确定位置。
  • span <num>：占据 num 个行。
  • <name>：与 grid-template-areas 中区域的名称匹配。
• column-start 和 column-end
  • auto：自动放置，由网格自动确定位置。
  • span <num>：占据 num 个列。
  • <name>：与 grid-template-areas 中区域的名称匹配。

以下是一个例子，演示如何使用关键字来指定 grid area：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 100px auto;
  grid-template-areas:
    "header header sidebar"
    "main main sidebar"
    "footer footer sidebar";
}

.header {
  grid-area: header;
}

在这个例子中，.grid-container 是一个带有三列和三行的网格，每行的大小基于其内容而定。grid-template-areas 指定了多个固定大小的区域，包括一个 header 区域。通过将 .header 的 grid-area 属性设置为 header，我们将它放置在名为 header 的区域中。

布局示例

以下是一个完整的布局示例，演示如何通过 grid-area 属性为不同的 grid item 分配 grid area，从而构建一个简单的响应式布局：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.header {
  grid-area: 1 / 1 / 2 / -1;
}

.nav {
  grid-area: 2 / 1 / 3 / 2;
}

.main {
  grid-area: 2 / 2 / 3 / -1;
}

.sidebar {
  grid-area: 2 / -1 / 3 / -2;
}

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

在这个例子中，我们使用 repeat() 函数来指定了一个自适应列宽的网格列布局。通过将 grid-area 属性应用于不同的 grid item，我们为它们指定了不同的 grid area，从而实现了以下布局：

┌────────────┬─────┬───────┐
│   Header   │     │       │
├────────────┤ Nav │  Main │
│            ├─────┤       │
│            │     ├───────┤
│            │     │       │
│            │     │       │
│            │     │       │
└────────────┴─────┴───────┘
           Sidebar
           
           ┌───────┐
           │ Footer│
           └───────┘

总结

grid-area 属性是一个非常强大的属性，通过它，我们可以精确地控制网格布局中的 grid item，从而实现各种各样的响应式布局。使用 grid-area 属性时，我们可以通过数字或关键字来指定 grid item 应占据的区域，并配合 grid-template-areas 一起使用，更直观地查看整个布局情况，让布局更加灵活和自适应。