如何用CSS实现动态调整大小的2列网格，奇数项最后一个占满整行

该需求可通过纯CSS实现，无需额外JavaScript逻辑。

原有实现的问题在于使用auto-fit规则会自动适配列数，未固定2列的布局结构，同时没有针对奇数个元素场景的末尾子元素设置跨列属性，因此奇数个元素时最后1个无法占满整行。

修改后的完整代码 #

.grid {
  display: grid;
  /* 固定2列结构，每列最小宽度300px，最大平分容器宽度 */
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  max-width: 37.5rem;
  /* 可按需调整列间距，替代子元素左右margin */
  column-gap: 1rem;
}

.grid > * {
  background-color: #ddd;
  margin: 0 0 1rem;
  padding: .5rem;
  text-align: center;
}

/* 匹配同时满足「是最后一个子元素」且「子元素序号为奇数」的元素，跨满整行 */
.grid > *:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

<div class="grid">
  <div>I’ll find something to put here</div>
  <div>I’ll find something to put here</div>
  <div>I’ll find something to put here</div>
</div>

效果验证 #

• 1个子元素：匹配跨列规则，占满整行宽度
• 2个子元素：末尾元素序号为偶数，不触发跨列，各占1列
• 3个子元素：末尾第3个元素序号为奇数，跨满第二行，前两个各占第一行1列
• 4及以上偶数个子元素：每行固定2个，按网格规则正常排列

若需要适配小屏场景，可额外添加媒体查询调整最小宽度阈值即可。

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