169 похожих чатов

#Заметка дня Давайте сегодня поговорим том, что иногда то, что выглядит

как грид, на самом деле так же легко реализуется флексами. Ну мало ли.

Возьмём, например, чередующиеся колонки. Это очень часто встречающийся вопрос. В первой строке 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

4 ответов

15 просмотров

сенкс, статья полезнаю, но тут как бы есть нюанс, статическое количество блоков, а если оно динамическое?

Sergey Bekharsky
нет там статического

пример с гридов grid-template-columns: repeat(6, 1fr);

Sergey-Bekharsky Автор вопроса
Bohdan
пример с гридов grid-template-columns: repeat(6, 1...

так увеличь число-то и посмотри

Похожие вопросы

Обсуждают сегодня

Господа, а что сейчас вообще с рынком труда на делфи происходит? Какова ситуация?
Rꙮman Yankꙮvsky
29
А вообще, что может смущать в самой Julia - бы сказал, что нет единого стандартного подхода по многим моментам, поэтому многое выглядит как "хаки" и произвол. Короче говоря, с...
Viktor G.
2
30500 за редактор? )
Владимир
47
а через ESC-код ?
Alexey Kulakov
29
Чёт не понял, я ж правильной функцией воспользовался чтобы вывести отладочную информацию? но что-то она не ловится
notme
18
У меня есть функция где происходит это: write_bit(buffer, 1); write_bit(buffer, 0); write_bit(buffer, 1); write_bit(buffer, 1); write_bit(buffer, 1); w...
~
14
Добрый день! Скажите пожалуйста, а какие программы вы бы рекомендовали написать для того, чтобы научиться управлять памятью? Можно написать динамический массив, можно связный ...
Филипп
7
Недавно Google Project Zero нашёл багу в SQLite с помощью LLM, о чём достаточно было шумно в определённых интернетах, которые сопровождались рассказами, что скоро всех "ибешни...
Alex Sherbakov
5
Ребят в СИ можно реализовать ООП?
Николай
33
https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_h_common.erl#L174 https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_olp.erl#L76 15 лет назад...
Maksim Lapshin
20
Карта сайта