CSS Grid 4列布局剩余单元格自动跨列填满宽度的实现咨询

该需求可通过CSS伪类组合选择器实现，无需手动绑定特定元素序号，可自动适配任意元素数量的4列Grid布局。

核心实现规则 #

在你的CSS中替换原来手动指定第9、10个元素的代码，添加以下通用规则：

/* 最后一行仅有1个元素时，跨4列占满整行 */
.grid .box:nth-child(4n + 1):nth-last-child(1) {
  grid-column: span 4;
}
/* 最后一行有2个元素时，每个跨2列占满整行 */
.grid .box:nth-child(4n + 1):nth-last-child(2),
.grid .box:nth-child(4n + 1):nth-last-child(2) ~ .box {
  grid-column: span 2;
}
/* 最后一行有3个元素时，最后1个跨2列占满整行，可根据需求调整 */
.grid .box:nth-child(4n + 1):nth-last-child(3) ~ .box:nth-last-child(1) {
  grid-column: span 2;
}

规则说明 #

• 4n + 1 匹配每一行的第一个元素，对应4列布局的行首位置
• :nth-last-child(N) 匹配倒数第N个元素，组合使用即可自动判断最后一行的元素总数
• 规则可适配所有元素数量场景：总元素数为10时自动匹配最后2个元素各跨2列，总元素数为9时自动匹配最后1个元素跨4列，无需手动修改代码

注意：你提供的原始代码存在重复嵌套的DOCTYPE、head标签问题，实际使用时需要删除重复的头部声明避免浏览器解析错误。

内容的提问来源于stack exchange，提问作者George Austin Bradley