CSS Сетка Складная Ряд - PullRequest
Новая
       8

CSS Сетка Складная Ряд

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

Я пытаюсь нарисовать сетку css, где первая строка имеет следующее поведение:

  1. , когда строка видна, она должна занять определенную высоту, например, 33% от grid, , даже если внутри строки нет содержимого
  2. , когда строка скрыта (например, display: none), она не должна занимать пробел, а вторая строка должна расширять свое содержимое

Я сделал нечто подобное здесь 

function toggle(index) {
  var collapse = document.querySelectorAll('.collapse')[index];
  collapse.classList.toggle("hide")
}
.collapse {
  overflow: auto;
  grid-area: collapse;
}
.right {
  background-color: green;
  grid-area: right;
}
.left {
  background-color: red;
  grid-area: left;
}
.grid {
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-rows: fit-content(100px) 1fr;
  grid-template-areas: "left collapse" "left right";
}

.hide {
  display: none;
}
<button onClick="toggle(0)">toggle collapse</button>
<div class="grid">
  <div class="left">left</div>
  <div class="collapse"><br/>c <br/>c <br/>c <br/>c <br/> <br/>c <br/>c <br/>c <br/>c <br/> <br/>c <br/>c <br/>c <br/>c <br/> <br/>c <br/>c <br/>c <br/>c <br/> <br/>c <br/>c <br/>c <br/>c <br/>c <br/>c <br/>c <br/>c <br/>c <br/> c<br/> c<br/></div>
  <div class="right">right</div>
</div>

<br/>

<button onClick="toggle(1)">toggle collapse</button>
<div class="grid">
  <div class="left">left</div>
  <div class="collapse"></div>
  <div class="right">right</div>
</div>

Первый пример работает как expceted, проблема в том, что если внутри div «collapse» нет содержимого, высота не устанавливается (вторая пример) 

.grid {
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-rows: fit-content(100px) 1fr;
  grid-template-areas: "left collapse" "left right";
}

Мне бы хотелось, чтобы это можно было сделать только с помощью css -grid свойств.

Спасибо!

1 Ответ

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

Я не уверен, что понимаю цель, но, как насчет предоставления .collapse фиксированной высоты? Как: 

.collapse {
  overflow: auto;
  grid-area: collapse;
  height: 80px;
}

Или минимальная высота?

Надеюсь, это поможет.

...