# 网格布局（CSS Grid）

### 缩写：Grid

### 简述

二维轨道布局：行列表格上放置与跨轨项目。

### 使用场景

页面骨架、卡片矩阵、仪表盘。

### 组成与要点

```text
grid-template-rows/columns
grid-area 放置
gap 间距
```

### 实践与应用

• 命名区域提高可读
• fr 分配剩余空间

### 关联术语

• Flex：一维对照
• 媒体查询：断点改模板