如何让换行的CSS Grid子项默认占满容器宽度？

完全可以通过CSS Grid实现你需要的自适应布局，同时保留Grid对子项高度对齐的优势，适配可翻转闪卡的场景，无需改用Flex布局。

核心实现方案 #

方法1：自动适配列数（简洁通用） #

通过grid-template-columns的动态配置，让布局根据子项数量自动调整：

.card-container {
  display: grid;
  /* 最小宽度设为50%，剩余空间自动拉伸占满整行 */
  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  gap: 1rem; /* 按需调整子项间距 */
}

对应效果：

• 1个子项：自动拉伸至100%宽度
• 2个子项：各占50%宽度并排显示
• 3个子项：前两个各占50%，第三个换行后自动占满整行

方法2：精准控制单独换行的子项 #

如果需要更严格的规则（仅当最后一个子项无同行伙伴时占满），可以结合伪类定位：

.card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 固定两列基础布局 */
  gap: 1rem;
}

/* 匹配最后一个子项且总数为奇数的情况，强制跨列占满 */
.card-container .card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

这个方案更精准，确保只有单独换行的子项才占满整行，其余场景保持两列50%宽度。

闪卡兼容性说明 #

两种方案都能完美支持闪卡的翻转效果，Grid的子项高度对齐特性会自动让不同内容高度的闪卡保持底部对齐，完全符合你的需求。

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