как грид, на самом деле так же легко реализуется флексами. Ну мало ли.
Возьмём, например, чередующиеся колонки. Это очень часто встречающийся вопрос. В первой строке 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
сенкс, статья полезнаю, но тут как бы есть нюанс, статическое количество блоков, а если оно динамическое?
нет там статического
пример с гридов grid-template-columns: repeat(6, 1fr);
так увеличь число-то и посмотри
Обсуждают сегодня