CSS Grid 与 Flex 布局选型实战指南-多彩编程

现代 CSS 布局有两位主角：Flexbox 和 Grid。很多初学者会困惑"到底该用哪个"。其实它们并不是竞争关系，而是互补的——Flex 擅长一维布局，Grid 擅长二维布局。本文从原理差异讲起，结合 6 个真实场景，帮你建立清晰的选型判断。

一、一维 vs 二维：本质区别

Flexbox 是一维布局系统，它一次只处理一个方向（行或列）。即使 flex-wrap 换行，每一行也是独立计算对齐的，行与行之间没有强关联。

Grid 则是二维布局系统，可以同时控制行和列，元素可以跨越多行多列，整体形成一个网格结构。

/* Flex：一行排开，换行后各行独立 */
.flex-row { display: flex; flex-wrap: wrap; gap: 12px; }
.flex-row > .item { flex: 1 1 200px; }

/* Grid：行列同时控制，整齐对齐 */
.grid-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

选型口诀：内容驱动用 Flex，结构驱动用 Grid。

二、什么时候用 Flex

当你关心的是"一组元素如何在一行/一列中分配空间、对齐、伸缩"时，Flex 是最佳选择。它从内容出发，由元素自身决定排布。

导航栏横向菜单
按钮组、标签组
卡片内图文左右排列
表单输入框与按钮的水平组合

/* 案例 1：导航栏菜单 */
.nav { display: flex; align-items: center; gap: 18px; }
.nav .logo { margin-right: auto; }     /* logo 靠左 */
.nav .menu { display: flex; gap: 24px; }
.nav .cta { flex-shrink: 0; }          /* 按钮不被压缩 */

/* 案例 2：卡片内图文左右布局 */
.card { display: flex; align-items: center; gap: 16px; }
.card .thumb { flex: 0 0 80px; }       /* 固定宽缩略图 */
.card .body { flex: 1; }              /* 内容自适应 */

/* 案例 3：输入框 + 按钮组合 */
.search { display: flex; gap: 8px; }
.search input { flex: 1; }
.search button { flex: 0 0 auto; }

三、什么时候用 Grid

当你关心的是"页面整体结构、行列对齐、跨越多格"时，Grid 更合适。它从容器出发，先定义网格再放置内容。

整页布局（头部/侧栏/主体/页脚）
相册、商品九宫格
仪表盘多面板布局
需要精确行列对齐的内容

/* 案例 4：经典三栏页面布局 */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  grid-template-rows: 64px 1fr 80px;
  grid-template-areas:
    "header header header"
    "side   main   aside"
    "footer footer footer";
  min-height: 100vh;
}
.layout .hd { grid-area: header; }
.layout .sd { grid-area: side; }
.layout .mn { grid-area: main; }
.layout .as { grid-area: aside; }
.layout .ft { grid-area: footer; }

/* 案例 5：相册九宫格，自动填充 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

/* 案例 6：仪表盘跨格布局 */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 120px;
  gap: 16px;
}
.dashboard .big   { grid-column: span 2; grid-row: span 2; }
.dashboard .wide  { grid-column: span 2; }

四、混用才是最佳实践

实际项目中，Flex 和 Grid 经常嵌套使用：Grid 负责宏观结构，Flex 负责局部排列。这种"外 Grid 内 Flex"的组合是最常见的现代布局套路。

/* 外层 Grid 控制页面结构，内层 Flex 控制卡片内部排列 */
.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 24px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card .head { display: flex; justify-content: space-between; }

五、响应式处理对比

Flex 的响应式主要靠 flex-wrap 和媒体查询调整 flex-basis；Grid 则能用 auto-fit/auto-fill 实现无需断点的自动响应，这是 Grid 的独门优势。

/* Grid 无断点响应：屏幕变窄自动减少列数 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

/* Flex 同样效果需要配合 wrap */
.responsive-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.responsive-flex > .item {
  flex: 1 1 240px;  /* 基础宽度 240px，剩余空间均分 */
}

六、选型决策清单

当你犹豫不决时，问自己三个问题：

是否需要同时控制行和列？是 → Grid；否 → 继续。
布局由容器结构决定还是内容决定？结构 → Grid；内容 → Flex。
是否需要元素跨越多格？是 → Grid；否 → Flex。

记住一点：没有银弹。两者都是工具，理解它们的思维模型（Grid 是先有网格再放内容，Flex 是内容自己决定怎么排）比记住语法更重要。多写多练，选型自然会变成本能反应。

技术文章