CSS (Grid), автоматическое изменение размера неизвестного количества элементов, строк и столбцов, 100% высота и ширина - PullRequest
0 голосов
/ 06 марта 2019

Я пытаюсь визуализировать динамическую (CSS) сетку с неизвестным количеством элементов (сгенерированный javascript).

Мне нужно, чтобы все элементы (очевидно, с измененным размером) имели ширину 100% и высоту 100%.

Примеры:

  • 1 элемент: большой квадрат
  • 2 элемента: 2 больших квадрата (2 горизонтальных столбца)
  • 3 элемента:экран в 4 квадрата, 1, 2, 3 деления, 4 (последний) пустой
  • 4 элемента: экран в 4 квадрата
  • и т. д. *
  • 1920элементы (на дисплее 1920x1080): размер каждого элемента очень и очень мал (может быть, только один пиксель или меньше, учитывая разрыв между ними) (без текста внутри) в том же количестве столбцов и строк (но это просто крайний пример, просто для значения!)

Что я сделал один: https://jsfiddle.net/fredhors/s4k3z9t2/8/

CSS :

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 10vmax);
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-item {
  background: red;
}

1 Ответ

1 голос
/ 09 марта 2019

Ошибка была в grid-template-columns: repeat();: я использовал ширину столбца minmax, равную 9%, чтобы все десять столбцов появлялись на странице с 1fr, чтобы распределить оставшееся пространство между желобами.

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9%, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-item {
  background: red;
}
<div class="grid-wrapper">
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content L</div>
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content L</div>
</div>

Большой или маленький, это все!;)

...