CSS Grid Area布局疑问：同类标签块堆叠原因及按类实现3列分类布局的可行性

嘿，我来帮你分析下问题所在，以及怎么实现你要的按类分3列的布局～

为什么你的代码会出现堆叠问题？ #

你当前代码里的grid-template-areas是用来定义固定的网格区域的，每个区域名称只能对应网格中的一个单元格。当你给多个元素设置同一个grid-area时，它们都会被放到同一个单元格里，自然就堆叠在一起了——这是Grid布局的正常行为，不是代码写错了，只是用错了实现方式。

按类实现3列分类布局完全可行！给你两种靠谱方案： #

方案1：用grid-column直接指定元素所在列（最直接） #

这种方法直接给每个类的元素绑定对应的列位置，Grid会自动把同一列的元素垂直排列，不管它们在HTML里的顺序如何。修改你的CSS如下：

.container{ 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 20px; 
  padding: 20px; 
  /* 可选：dense可以让列内元素自动填充空白，避免某列元素少而留空 */
  grid-auto-flow: dense;
} 
.type1{ 
  background-color: aqua; 
  grid-column: 1; /* 强制放在第1列 */
} 
.type2{ 
  background-color: forestgreen; 
  grid-column: 2; /* 强制放在第2列 */
} 
.type3{ 
  background-color: salmon; 
  grid-column: 3; /* 强制放在第3列 */
}

效果：所有.type1元素都会跑到第1列，从上到下依次排列；.type2在第2列，.type3在第3列，完美实现按类分栏的需求，哪怕HTML里的元素顺序是随机的也没问题。

方案2：用自定义属性+Grid（扩展性更强） #

如果以后可能增加更多类型，这个方法更灵活：通过自定义属性绑定列索引，再用grid-column读取属性值来定位元素。

.container{ 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 20px; 
  padding: 20px; 
  grid-auto-flow: dense;
} 
.type1{ 
  background-color: aqua; 
  --column-index: 1;
  grid-column: var(--column-index);
} 
.type2{ 
  background-color: forestgreen; 
  --column-index: 2;
  grid-column: var(--column-index);
} 
.type3{ 
  background-color: salmon; 
  --column-index: 3;
  grid-column: var(--column-index);
}

以后新增.type4这类的分类时，只需要添加对应的样式（设置--column-index:4），同时把grid-template-columns改成repeat(4,1fr)即可，无需修改其他逻辑，扩展性拉满。

总结 #

你原来的思路是对的，但用错了Grid的API——grid-template-areas适合定义固定位置的区块（比如页眉、侧边栏、页脚这种静态布局），而按类动态分栏的需求，用grid-column指定列位置是更合适的选择。

内容的提问来源于stack exchange，提问作者Mojtaba Barari