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://stackblitz.com/edit/angular-rp5xkh

Answer 1

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

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

.parent div {
  border: 1px black solid;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 8vh;
}

.div1 {
  grid-row: 1 / 6;
  grid-column: 1;
  background: lightblue;
}

.div2 {
  grid-row: 1 / 2;
  grid-column: 1 / -1;
  background: lightgreen;
}

.div1+.div2 {
  grid-row: 1 / 2;
  grid-column: 2 / -1;
}

.div3 {
  grid-row: 2 / 6;
  grid-column: 1 / 5;
  background: red;
}

.div1~.div3 {
  grid-row: 2 / 6;
  grid-column: 2 / 5;
}

.div3:last-child {
  grid-row: 2 / 6;
  grid-column: 1 / -1;
}

.div1~.div3:last-child {
  grid-row: 2 / 6;
  grid-column: 2 / -1;
}

.div4 {
  grid-row: 2 / 6;
  grid-column: 5 /6;
  background: orange;
  opacity: .5
}

<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

<div class="parent">
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

<div class="parent">
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>