#заметка дня

Давайте сегодня поговорим том, что иногда то, что выглядит как грид, на самом деле так же легко реализуется флексами. Ну мало ли.

Возьмём, например, чередующиеся колонки. Это очень часто встречающийся вопрос. В первой строке 3, во второй 2, в третьей опять 3 и так далее.

Первая мысль – перед нами грид. Но CSS Grid сам по себе не решает вопрос повторяющихся шаблонных структур, в любом случае приходится применять nth-child. Так какая тогда разница?

Давайте просто сделаем:
https://codepen.io/alinaki/pen/zYNVqvL

И то же самое на гридах:
https://codepen.io/alinaki/pen/NWdZNGd

Число строк совершенно одинаковое. Возможно, на гридах и элегантнее, решать вам.

Бонус, flexbox + gap:
https://codepen.io/alinaki/pen/mdWdLrw

А вот яркий пример того, чего на флексе точно не сделать без дополнительных обёрток:
https://codepen.io/alinaki/pen/QWdXNYm

#css #flexbox #grid #flex