如果删除一项，如何将网格项与屏幕对齐-CSS

Question

我已加载七件物品。我将编写这样的逻辑：如果我隐藏这些项目，其他项目应该自动与屏幕对齐

例如， 如果任务被删除（隐藏），则项目 1、项目 2、项目 3、项目 4 和其他项目应与屏幕对齐，反之亦然

.grid-container {
  display: grid;
  padding: 77px 88px 0 88px;
  background-color: #F4F4F4;
  grid-template-columns: 624px repeat(2, 304px);
  grid-template-rows: auto repeat(2, 1fr) fr;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

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

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

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

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

.t4 {
  grid-column: 3/4;
  grid-row: 2/3;
}

.otherItems {
  grid-column: 1/4;
  grid-row: 3/4;
}

<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>

Answer 1

您可以使用网格容器上的align-items属性，使用以下值之一来对齐项目：例如 汽车。 普通的。 开始。 结尾。 中心。