CSS Grid 布局完全指南

Grid 通过 `display: grid` 和 `grid-template-columns`、`grid-template-rows` 定义二维网格。`fr` 单位表示剩余空间的比例分配。

`grid-area` 和 `grid-template-areas` 可以用命名区域快速实现复杂布局，如 header、sidebar、main、footer 的经典结构。

结合 `gap`、`auto-fit`、`minmax()` 可以构建响应式网格，无需媒体查询即可适配不同屏幕宽度。