CSS Grid忽略grid-template-columns属性问题求解

问题场景 #

想要实现一个3等宽列、行数不限的CSS Grid布局：

• 顶部固定grid-area: b，占满第一整行
• grid-area: a占据下方2行2列的区域，d和e在右侧对应位置
• 其余子元素自动填充下方行，每行最多3列

当前使用的代码：

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
  "b b b"
  "a a d"
  "a a e";
}

但实际效果中，额外的子元素会导致布局变成5列，只有手动在grid-template-areas中添加未使用的区域（比如c）才能恢复3列，希望无需额外指定就能解决。

解决方案 #

放弃完全依赖grid-template-areas定义整体结构，改用grid-column和grid-row直接定位固定元素，保持网格列数固定为3列，剩余元素会自动按规则填充：

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto; /* 剩余行自动生成高度 */
  gap: 1rem; /* 可选：添加元素间距，提升可读性 */
}

/* 顶部b元素占满整行 */
.b {
  grid-column: 1 / -1;
}

/* a元素占据第2-3行、第1-2列 */
.a {
  grid-row: 2 / 4;
  grid-column: 1 / 3;
}

/* d元素定位到第2行第3列 */
.d {
  grid-row: 2;
  grid-column: 3;
}

/* e元素定位到第3行第3列 */
.e {
  grid-row: 3;
  grid-column: 3;
}

原理说明 #

原来的grid-template-areas写法会创建一个固定结构的显性网格，当存在未在areas中定义的子元素时，Grid的自动布局逻辑可能会与显性网格的预设结构冲突，导致隐式网格错误扩展列数。

而直接使用grid-column/grid-row定位固定元素后，网格的列数被grid-template-columns: repeat(3, 1fr)牢牢固定，剩余未指定定位的子元素会遵循默认的grid-auto-flow: row规则，从第4行开始自动按3列排列，完全符合需求。

内容的提问来源于stack exchange，提问作者Roddy of the Frozen Peas