CSS, grid. Нечетные строки в 3 столбца, четные - в 4 столбца

Question

В Grid-системе я не силён, поэтому прошу помощи.

Есть 14 элементов, которые необходимо разместить в виде:

Ничего, кроме как через grid-template-areas не придумал:

grid-template-areas:
  "a a a a b b b b c c c c"
  "d d d e e e f f f g g g"
  "h h h h i i i i j j j j"
  "k k k l l l m m m n n n";

div:nth-child(1) {
  grid-area: a;
}
...
div:nth-child(14) {
  grid-area: n;
}

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

Есть ли ещё варианты, как сделать то же самое, но без явного указания, какой элемент - где должен находиться и сколько должен занимать? Условно задать: каждая нечётная строка - repeat(3,4fr), каждая чётная - repeat(4,3fr).

Благодарю за помощь.

Answer 1

Может не слишком красиво, зато такое расположение будет создаваться при добавлении новых блоков. Ширину подстроите, надеюсь.

<style>
   body{
      display:flex;
      flex-wrap: wrap;
   }
   div{
border:1px solid #333;
width:24%;
height:20px;

   }
   div:nth-child(7n-6),div:nth-child(7n-5),div:nth-child(7n-4){
      width:33%;
}
</style>

Answer 2

Разобрался, но может кто-то ещё вариантов посимпатичнее подкинет.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(12,1fr);
}
.box {
  border: 1px solid #888;
  padding: 20px;
}

.box:nth-child(7n+1), .box:nth-child(7n+2), .box:nth-child(7n+3) {
  grid-column: auto / span 4;
}
.box:nth-child(7n+4), .box:nth-child(7n+5), .box:nth-child(7n+6), .box:nth-child(7n+7) {
  grid-column: auto / span 3;
}

<div class="grid">
  <span class="box">1</span>
  <span class="box">2</span>
  <span class="box">3</span>
  <span class="box">4</span>
  <span class="box">5</span>
  <span class="box">6</span>
  <span class="box">7</span>
  <span class="box">8</span>
  <span class="box">9</span>
  <span class="box">10</span>
  <span class="box">11</span>
  <span class="box">12</span>
  <span class="box">13</span>
  <span class="box">14</span>
</div>

БЛОГ НА HUSL

CSS, grid. Нечетные строки в 3 столбца, четные - в 4 столбца

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