刚开始学 CSS 的时候，我总是在 Grid 和 Flexbox 之间纠结。用得多了以后发现，其实判断标准只有一条：你是想控制"行"还是想控制"分布"。

一句话区分

  • Flexbox：一维布局。内容决定容器，适合"一排东西怎么排"。
  • Grid：二维布局。容器决定内容，适合"整个页面怎么分块"。

典型场景对照

用 Flexbox 的场景

  • 导航栏：logo 在左，菜单在右
  • 按钮组：一排按钮等间距
  • 卡片内部：图标 + 文字垂直居中对齐
  • 垂直居中：display:flex; align-items:center

用 Grid 的场景

  • 整页布局：header / sidebar / main / footer
  • 卡片墙：响应式自适应列数
  • 表单：标签和输入框对齐成两列

一个常用的响应式卡片墙

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

这四行代码实现了：列宽最小 260px，能放几列放几列，剩余空间平分。不需要写任何媒体查询。这是 Grid 最让我惊艳的地方。

嵌套使用才是常态

实际项目里两者几乎总是嵌套的。典型结构是：外层用 Grid 划分区域，每个区域内部用 Flexbox 排列元素。

.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 36px;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

结论

不要问"哪个更好"，要问"这一层需要一维还是二维"。想清楚了，选择自然就出来了。