Grid 布局

Grid 用行列描述二维布局，明确轨道、间距和区域后，复杂页面也能保持可读。

核心说明

Grid 用行和列表达二维布局。可以先用 grid-template-columns 定义轨道，再用 gap、区域命名和 minmax() 处理间距与响应式变化。

关键点

• fr 表示分配剩余空间，minmax() 可以给轨道设置合理的最小值。
• grid-template-areas 适合表达页面级布局，但组件内部不必过度命名。
• 移动端优先定义单列，再在更宽断点增加列数，通常比从桌面压缩更稳定。