# CSS grid 参考

URL: https://caijiao.org/reference/css/grid
Source: docs/reference/css/grid.md
Description: CSS grid Reference，整理 display:grid、grid-template-columns、gap、grid-area、auto-fit、minmax、可运行演示和常见错误。

CSS Grid 是二维布局模型，适合同时控制行和列，例如卡片列表、页面布局、仪表盘和图文排版。

## 语法

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
```

## 常用属性

| 属性 | 说明 |
| --- | --- |
| `display: grid` | 启用网格布局 |
| `grid-template-columns` | 定义列轨道 |
| `grid-template-rows` | 定义行轨道 |
| `gap` | 行列间距 |
| `grid-column` | 控制项目跨列 |
| `grid-row` | 控制项目跨行 |
| `grid-template-areas` | 命名区域布局 |

## 可运行演示

[在线代码演示](/reference/css/demos/grid-cards.html)

## 常见错误

- 把 Grid 当成表格语义；布局用 Grid，表格数据仍应使用 `<table>`。
- `auto-fit` 和 `auto-fill` 混用前要确认空轨道是否需要保留。
- 固定列宽过多，移动端容易横向溢出。

## 相关内容

- [CSS Reference](/reference/css/)
- [CSS Grid 教程](/css/08-grid/01-grid-basics)
- [flex 参考](/reference/css/flex)
- [MDN CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)