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

问题描述 投票:0回答:1

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

例如, 如果任务被删除(隐藏),则项目 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>

html css sass css-grid
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.