Как сделать такую сетку?

Question

[entenik]

Подскажите как сделать такую сетку на grid/flex? Нужно чтобы 3, 4 и 8 элементы были уже чем другие. Использовать отдельные контейнеры нельзя, нужно чтобы всё было в едином контейнере

Answer 1

[xdevelx]

.grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap:  20x;
}

.grid > * {
  grid-column: span 3; /* по умолчанию все широкие */
}

.grid > :nth-child(9n + 3),
.grid > :nth-child(9n + 4),
.grid > :nth-child( 9n + 8) {
  grid-column: span 2; /* узкие элементы */
}

Можете ещё попробовать 14 колоночную сетку, узкие - 4 колонки, широкие - 5. Или 11 колонок (4 и 3). А вообще такие вещи нужно брать из макета или уточнять у дизайнера, какими флюидами он прочувствовал такие пропорции?