Grid разные ряды, парные и непарные

Question

Подскажите, возможно ли задать разные колонки для разных строк, находясь в одном блоке? Структуру менять нельзя.

Прикрепил ссылку на кодпен

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

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.grid > div {
  background: blue;
  height: 60px;
  
}

.grid > div:nth-child(odd) {
  grid-column: 1/3;
}

.grid > div:nth-child(even) {
  grid-column: 3/4;
}

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

codepen

Answer 1

Я так понял речь идет не о "парном/непарном" ряде, а о "четном/нечетном". Похоже вы хотите сделать нечто подобное:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.grid > div {
  padding: 10px;
  background: blue;
}

.grid > div:nth-child(5n+4) { 
  grid-row: auto / span 2; 
  background: red; 
}

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

БЛОГ НА HUSL

Grid разные ряды, парные и непарные

Ответы (1 шт):