CSS Расширить элемент сетки влево или вправо, когда освободится пространство - PullRequest
Новая
       4

CSS Расширить элемент сетки влево или вправо, когда освободится пространство

1 голос
/ 17 января 2020

У меня есть следующий шаблон с шаблоном сетки и некоторыми кнопками, которые скрывают и показывают 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>

Как вы можете видеть, я пытался добавить несколько классов, когда div1 или div4 удалены из DOM, и я играю с grid-area. Оно работает. Но мне интересно, есть ли более автоматизированный c способ сделать это?

Вот стек, который показывает мое рабочее решение https://stackblitz.com/edit/angular-rp5xkh

1 Ответ

0 голосов
/ 18 января 2020

С серией селекторов это действительно возможно, но я бы предположил, что это не очень масштабируемо. 

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