Как получить переменную высоту в сетке css?

Question

Я имею в виду, что первый элемент имеет высоту x, затем второй - высоту y, а третий - x и так далее ..

Я пробовал повторить, но не могу понять синтаксис.

    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: repeat();
    gap:2px;

Изменить: забыл добавить это (нуб, прошу прощения!)

Если первая строка: xyxy вторая строка должна быть: yxyx третья должна быть: xyxy четвертая и так далее

Как это

Answer 1

Все ячейки в строке имеют одинаковую высоту. Вы ничего не можете с этим поделать в рамках вашего определения grid-template-rows, но вы можете работать с max-height в ячейках.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 5px;
}

.grid > div {
  background-color: #f00;
}

.grid > div:nth-child(even) {
  max-height: 50%;
}

<div class="grid">
  <div></div>
  <div class="half-height"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="half-height"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="half-height"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="half-height"></div>
  <div></div>
  <div></div>
</div>

Answer 2

Если вы говорите о ячейках сетки (отдельных элементах), вы должны нацеливаться на них напрямую, а не от родителя. Вот простой пример с использованием селекторов nth-child. Вот несколько различных вариантов, которые вы можете использовать для создания шаблона по вашему выбору: https://developer.mozilla.org/en-US/docs/Web/CSS/: nth-child # Примеры

Кроме того, вам не обязательно использовать явные значения высоты, например Я так и сделал, это был просто быстрый способ показать, что я имею в виду. Они могут быть max-height или ограничены другим способом.

Изображение:

введите описание изображения здесь

Answer 3

редактировать Очевидно, вы ищете это: редактировать 2 Я понял, как это сделать с некоторыми :nth-child() правилами

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 8px;
}

.grid-item {
  background-color: red;
}

.grid-item:nth-child(8n+1),
.grid-item:nth-child(8n+3),
.grid-item:nth-child(8n+5),
.grid-item:nth-child(8n+6) {
  grid-row: span 2;
  background-color: blue;
}

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>