使用 CSS Grid 构建现代网页布局

CSS Grid Layout 是 CSS 中最强大的布局系统。它是一个二维系统，可以同时处理列和行，这与 Flexbox 的一维布局形成了有趣的对比和互补。

基础概念

Grid 布局由容器（Grid Container）和项目（Grid Items）组成。在容器上设置 display: grid 即可开启 Grid 布局。

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

fr 单位详解

fr 是 Grid 布局中专用的弹性单位，代表"一份可用空间"。例如 1fr 2fr 1fr 表示三列分别占 1/4、1/2、1/4 的宽度。

响应式实践

结合 auto-fit 和 minmax，可以在不写任何媒体查询的情况下实现响应式网格：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

当容器宽度不足以容纳 280px 的最小列宽时，项目会自动换行。这使得同一段 CSS 在手机、平板和桌面端都表现良好。

网格区域命名

grid-template-areas 允许你以一种非常直观的方式定义布局：

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content content"
    "footer  footer  footer";
  grid-template-columns: 250px 1fr 1fr;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

总结

CSS Grid 已经在所有现代浏览器中得到良好支持。对于整体页面布局，Grid 是最佳选择；对于组件内部的线性排列，Flexbox 更为合适。在实际项目中，两者配合使用能发挥最大效用。