我已加载七件物品。我将编写这样的逻辑:如果我隐藏这些项目,其他项目应该自动与屏幕对齐
例如, 如果任务被删除(隐藏),则项目 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>
您可以使用网格容器上的align-items属性,使用以下值之一来对齐项目:例如 汽车。 普通的。 开始。 结尾。 中心。