如何用CSS Grid实现每行不同列数布局？含grid-template-areas示例

阿华AIGC实验室

2026-5-21

嘿，我来帮你搞定这个CSS Grid布局的问题！首先得指出你当前代码里的一个小语法坑——grid-area属性的取值不需要加单引号，比如.a { grid-area: a; }才是正确写法，带单引号会导致grid-template-areas无法正常生效哦。

接下来针对你想要实现「每行不同列数」的需求，我给你两种实用的实现方案：

方案一：用`grid-template-areas`实现（适合固定结构）

如果你的元素位置是固定的，这种方式会非常直观。我们只需要先定义足够的基础列数，再通过grid-template-areas指定每行的元素分布，就能轻松实现每行不同列数的效果。

比如想要第一行显示A、B两个元素（视觉上2列），第二行显示C、D、E三个元素（视觉上3列），代码示例如下：

.container {
  display: grid;
  /* 定义3列等宽基础布局，用fr单位自动分配可用空间 */
  grid-template-columns: 1fr 1fr 1fr;
  /* 定义区域分布：第一行A占第1列，B占第2-3列；第二行C、D、E各占1列 */
  grid-template-areas:
    "a b b"
    "c d e";
  gap: 12px; /* 添加元素间距，提升视觉层次感 */
}

/* 给每个元素绑定对应的网格区域 */
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
.e { grid-area: e; }

要是你想让第一行严格是2个等宽元素、第二行严格是3个等宽元素，可以调整列定义和区域配置：

.container {
  display: grid;
  /* 定义5列：前2列给第一行，后3列给第二行 */
  grid-template-columns: repeat(2, 1fr) repeat(3, 1fr);
  grid-template-areas:
    "a b . . ."
    ". . c d e";
  gap: 12px;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
.e { grid-area: e; }

方案二：直接用`grid-column`/`grid-row`定位（更灵活）

如果你的布局可能有动态变化，或者不想依赖grid-template-areas，直接给每个元素指定列/行位置会更灵活，不需要提前定义所有网格区域：

.container {
  display: grid;
  gap: 12px;
  /* 无需提前固定列数，Grid会根据元素位置自动调整 */
}

/* 第一行：A、B各占1列 */
.a {
  grid-row: 1;
  grid-column: 1 / 2;
}
.b {
  grid-row: 1;
  grid-column: 2 / 3;
}

/* 第二行：C、D、E各占1列 */
.c {
  grid-row: 2;
  grid-column: 1 / 2;
}
.d {
  grid-row: 2;
  grid-column: 2 / 3;
}
.e {
  grid-row: 2;
  grid-column: 3 / 4;
}

这种方式下，Grid会自动根据你指定的列范围生成对应的网格结构，完美实现每行不同列数的需求。

最后再划个重点：