如何使用CSS Subgrid实现动态列跨度的网格布局？

问题核心 #

你的.grandparent是12列网格，.parent里的.achild2数量是动态的，没法提前给.parent写死grid-column: span N，但要让.achild2直接对齐祖父级的12列网格，现在用display:contents能实现，想换成Subgrid方案。

解决代码 #

直接修改.parent和.achild1的CSS即可：

.grandparent {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12列网格 */
  gap: 10px;
  background-color: lightgreen;
  padding: 20px;
}

.parent {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1; /* 直接占满祖父网格的所有列，不用提前算span */
  background-color: lightblue;
  padding: 10px;
  gap: inherit; /* 继承祖父的间距，保持整体一致 */
}

.achild1 {
  background-color: lightpink;
  height: 50px;
  padding: 20px;
  grid-column: 1 / -1; /* 让achild1也占满全部列，匹配目标布局 */
}

.achild2 {
  background-color: lightyellow;
  height: 50px;
  border: 2px solid red;
  padding: 10px;
  /* 要是需要每个子元素占多列，直接加grid-column: span X就行，比如span 2 */
}

原理说明 #

• grid-column: 1 / -1：让.parent直接撑满祖父网格的第一列到最后一列，不管祖父有多少列，完全不用提前知道跨度值，完美适配动态场景。
• subgrid：让.parent的列轨道直接继承祖父的12列，这样.achild2就会自动按祖父的网格排列，和用display:contents的效果完全一致，还能保留.parent的背景、内边距这些样式（display:contents会让父元素消失，没法加这些）。
• gap: inherit：保证.parent内部的间距和祖父网格一样，不会出现间距不一致的问题。

这样改完，不管.achild2有多少个，都会自动填充到12列网格里，.parent的浅蓝色背景也会覆盖整个网格宽度，.achild1占满全部列，完全符合你要的布局效果。

内容的提问来源于stack exchange，提问作者Mr Hyde