# 网格线与区域

URL: https://caijiao.org/css/08-grid/02-grid-lines-areas
Source: docs/css/08-grid/02-grid-lines-areas.md
Description: 网格线与区域是 CSS Grid 重要的概念，通过命名和线编号，可以精确控制网格项目的位置和布局区域。

CSS Grid 中，网格线是定义网格单元边界的线，网格区域是由多条网格线围成的矩形区域。

## 1. 网格线编号

网格线从 1 开始编号，横向为列线，纵向为行线。

例如：

```css
grid-column: 1 / 3; /* 从第1条列线开始，到第3条列线结束（不包括第3条线所在列） */
grid-row: 2 / 4; /* 从第2条行线开始，到第4条行线结束 */
```

## 2. 命名网格线

可以使用方括号为网格线命名，方便布局。

```css
grid-template-columns: [start] 100px [line2] 1fr [end];
grid-template-rows: [top] 50px [bottom];
```

然后项目可以用命名定位：

```css
grid-column: start / line2;
grid-row: top / bottom;
```

## 3. 网格区域（Grid Area）

通过 `grid-template-areas` 定义命名区域，直观定义布局。

```css
grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";
```

给子元素赋值区域名：

```css
grid-area: header;
```

## 网格线与区域示例

[在线代码演示](/css/demos/20.html)