Grid 布局完全指南

Grid vs Flexbox

Flexbox 是一维布局（行或列），Grid 是二维布局（行和列同时控制）。Grid 更适合整体页面布局，Flexbox 更适合组件内部排列。

核心概念

• grid-template-columns / grid-template-rows：定义轨道
• grid-gap (gap)：轨道间距
• grid-area：区域命名与放置
• fr 单位：剩余空间的弹性分配
• minmax()：响应式轨道尺寸