CSS Grid

Grid 与 Flexbox 的分工

一个常见误解是 Grid「更新更强」所以应该取代 Flexbox。实际上两者解决不同问题：Flexbox 擅长一维布局（一行导航、一列列表），Grid 擅长二维布局（整页网格、卡片瀑布流）。实际项目里两者经常嵌套使用：Grid 做整体页面骨架，Flexbox 处理组件内部对齐。

Grid 的规范由微软工程师 Bert Bos 等人推动，IE10 在 2012 年就实现了一个早期版本，但语法差异大，几乎没人真正用。2017 年 Chrome 57、Firefox 52 在同一个月支持了最终语法，这在浏览器协调史上实属罕见。[1]

核心特性

Grid 引入了一些 CSS 历史上全新的概念：

• fr 单位：1fr 表示「一份可用空间」，grid-template-columns: 1fr 2fr 1fr 把空间按 1:2:1 分配
• grid-template-areas：用 ASCII 图直观描述布局，sidebar header main footer，所见即所得
• auto-fill 与 auto-fit：配合 minmax() 实现响应式网格，无需媒体查询
• subgrid（CSS Grid Level 2）：让嵌套网格对齐到父网格的轨道，Chrome 117（2023）才全面支持