# CSS Grid 布局

现代网页布局的终极解决方案！

## 基本语法

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
```

## 响应式设计

```css
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}
```

## 实用技巧

- `grid-area`: 指定网格区域
- `minmax()`: 自适应列宽
- `auto-fit` vs `auto-fill`: 灵活布局

Grid 让布局变得简单多了！