CSS：移除网格项目后如何让剩余项目自动适配屏幕对齐

需求说明 #

当前加载了7个网格项目，需实现：隐藏任意项目后，剩余项目自动适配屏幕对齐。例如隐藏Task项目后，item1、item2、item3、item4及其他项目需自动填充空位对齐；显示Task项目时，布局恢复原有结构。

现有代码问题 #

原代码通过固定grid-column和grid-row为每个元素指定了固定位置，当某个元素隐藏后，对应的网格位置会空置，无法自动让剩余元素填充适配，导致布局错乱。

修改后的实现代码 #

CSS 代码 #

.grid-container {
  display: grid;
  padding: 77px 88px 0 88px;
  background-color: #F4F4F4;
  gap: 1rem;
  justify-content: center;
  align-items: start;
}

/* 存在Task元素时的网格布局 */
.grid-container:has(.task) {
  grid-template-columns: 624px repeat(2, 304px);
  grid-template-rows: auto auto;
}

/* 无Task元素时的网格布局 */
.grid-container:not(:has(.task)) {
  grid-template-columns: repeat(3, 304px);
}

.task {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.t1, .t2, .t3, .t4 {
  grid-column: span 1;
  grid-row: span 1;
}

/* 无Task时调整小项的位置 */
.grid-container:not(:has(.task)) .t1 { grid-column: 1; grid-row: 1; }
.grid-container:not(:has(.task)) .t2 { grid-column: 2; grid-row: 1; }
.grid-container:not(:has(.task)) .t3 { grid-column: 1; grid-row: 2; }
.grid-container:not(:has(.task)) .t4 { grid-column: 2; grid-row: 2; }

.otheritems {
  grid-column: 1 / -1; /* 始终占满整行 */
  grid-row: auto;
}

HTML 代码 #

<div class="grid-container">
  <div class="task">Task</div>
  <div class="t1">1</div>
  <div class="t2">2</div>
  <div class="t3">3</div>
  <div class="t4">4</div>
  <div class="otheritems">other items</div>
</div>

效果示意图 #

方案说明 #

1. 使用CSS :has() 选择器检测.task元素的存在状态，动态切换网格的列模板：有Task时为624px + 2*304px的三列布局，无Task时为三列304px的布局。
2. 给小项设置基础的网格跨度，同时在无Task时调整它们的位置，确保填充空位。
3. .otheritems通过grid-column: 1 / -1实现无论列数多少，始终占满整行，保证布局一致性。

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