如何用CSS实现基于元素存在状态的Grid布局自适应调整？

可以完全通过CSS实现该需求，不需要修改PHP渲染逻辑，以下是两种可行方案：

方案1：使用:has()选择器（直观适配整体布局） #

先定义基础Grid布局，对应存在.item-7和.item-8的正常场景：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: 
    "1  2   2   2"
    "3  4   4   4"
    "5  6   7   8";
}

/* 为各子元素分配对应区域 */
.item-1 { grid-area: 1; }
.item-2 { grid-area: 2; }
.item-3 { grid-area: 3; }
.item-4 { grid-area: 4; }
.item-5 { grid-area: 5; }
.item-6 { grid-area: 6; }
.item-7 { grid-area: 7; }
.item-8 { grid-area: 8; }

通过:has()选择器检测容器内缺失.item-7和.item-8的情况，重新定义布局：

/* 当容器中不存在.item-7和.item-8时，更新布局 */
.grid-container:has(:not(.item-7), :not(.item-8)) {
  grid-template-areas: 
    "1  2   2   2"
    "3  4   4   4"
    "5  6   6   6";
}

方案2：使用相邻兄弟选择器（兼容性更好） #

如果需要兼容不支持:has()的旧浏览器，可以直接针对.item-6调整列跨度：

/* 当.item-6后面没有紧跟.item-7时，让它跨3列占据原6、7、8的位置 */
.item-6:not(+ .item-7) {
  grid-column: 2 / 5; /* 从第2列起始，到第5列结束，覆盖3列空间 */
}

这个方案无需修改容器的grid-template-areas，直接调整目标元素的占位规则，代码更简洁，兼容性覆盖范围更广。

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