CSS释放空间时向左或向右扩展网格项目

Question

我有以下带有网格模板的模板，以及一些隐藏和显示div1和div4的按钮，并且div2和div3的区域应相应扩大。我希望当div1不存在时，div2和div3区域应向左扩展（从column 1而不是column 2开始），并且类似地，div3应该在column 6处结束div4不存在。

.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 500px;
}

.parent div {
  border: 1px black solid;
}

.div1 {
  grid-area: 1 / 1 / 6 / 2;
}

.div2 {
  grid-area: 1 / 2 / 2 / 6;
}

.div2.expandedLeft {
  grid-area: 1 / 1 / 2 / 6;
}

.div3 {
  grid-area: 2 / 2 / 6 / 5;
}

.div3.expandedLeft {
  grid-area: 2 / 1 / 6 / 5;
}

.div3.expandedRight {
  grid-area: 2 / 2 / 6 / 6;
}

.div3.expandedLeft.expandedRight {
  grid-area: 2 / 1 / 6 / 6;
}

.div4 {
  grid-area: 2 / 5 / 6 / 6;
}

<div class="parent">
  <div class="div1" *ngIf="!hideDiv1"></div>
  <div class="div2" [class.expandedLeft]="hideDiv1"></div>
  <div class="div3" [class.expandedLeft]="hideDiv1" [class.expandedRight]="hideDiv2"></div>
  <div class="div4" *ngIf="!hideDiv2"></div>
</div>

<div>
  <button (click)="hideDiv1 = true">hide it</button>
  <button (click)="hideDiv1 = false">show it</button>
</div>
<div>
  <button (click)="hideDiv2 = true">hide it</button>
  <button (click)="hideDiv2 = false">show it</button>
</div>

您可以看到，当我从DOM中删除div1或div4时，我尝试添加一些类，而我使用grid-area。有用。但是我想知道是否有更自动的方法？

这里是显示我的有效解决方案https://angular-rp5xkh.stackblitz.io的堆叠闪电战>

我有以下带有网格模板的模板，以及一些用于隐藏和显示div1和div4的按钮，并且div2和div3的区域应相应扩展。我希望当div1不存在时，...

Answer 1

使用一系列选择器实际上是可行的，但我建议它不是真正可扩展的。