如何在不修改容器样式的前提下调整CSS Grid隐式行的列宽？

实现方案 #

你可以通过将Grid容器拆分为最小等宽轨道，再给不同位置的子元素设置跨列宽度的方式实现，无需修改任何HTML结构：

.container {
  display: grid;
  /* 把原2fr+3fr的总宽度拆分为5个1fr的等宽轨道 */
  grid-template-columns: repeat(5, 1fr);
}

/* 奇数行首项、偶数行尾项占2份宽度 */
.container p:nth-child(4n + 1),
.container p:nth-child(4n + 4) {
  grid-column: span 2;
}

/* 奇数行尾项、偶数行首项占3份宽度 */
.container p:nth-child(4n + 2),
.container p:nth-child(4n + 3) {
  grid-column: span 3;
}

原理解释 #

原布局2fr + 3fr的总宽度比例为5份，因此我们把容器列拆分为5个1fr的最小等宽单元，通过nth-child选择器按4个元素（对应两行）为周期设置跨列宽度：

• 第1、5、9...个元素对应奇数行第一列，占2份宽度
• 第2、6、10...个元素对应奇数行第二列，占3份宽度
• 第3、7、11...个元素对应偶数行第一列，占3份宽度
• 第4、8、12...个元素对应偶数行第二列，占2份宽度

该方案元素排列顺序完全不变，自动适配更多行的交替列宽需求。

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