Как в grid сделать, чтобы не зависеть от template-columns?

Question

[ogneog]

Здравствуйте. Хочу добиться такого эффекта:



Не могу понять, как избавиться от ширины колонок. По разному пробую, все никак не получается.

Мой текущий код и результат:



У меня здесь ширина уходит за пределы контейнера родителя :(
Как правильно сделать, чтобы друг за другом шло все?

.items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 10px;
    .item:nth-child(4n + 1),
    .item:nth-child(4n + 4) {
      background: red; // Первый элемент в каждой паре будет красным
      width: 483px;
    }
    .item:nth-child(4n + 2),
    .item:nth-child(4n + 3) {
      background: green; // Второй элемент в каждой паре будет зеленым
      width: 635px;
    }
  }

Comments

[Ivan Ustûžanin]

с гридом без 3 колонок и со стратегическим размещением grid-row: span 2 так не сделаешь, но такое можно попробовать провернуть с флексом и flex-flow: wrap

[Александр Васильев]

Если фикс, то grid-template-areas
Если динамика, то оборачивать каждые два элемента через js и вообще без гридов. А обертки уже чередовать стилями.

[szQocks]

https://stackoverflow.com/questions/63123293/dynam...

[Ankhena]

Тут же явно 3 колонки, а не две.
И grid-row: span 2 для элементов (а не ширина), которые занимают по две колонки. Через nth-child.

Answer 1

[Сергей delphinpro]

Так: