Комментарии 4
Автору поставил плюсы за старания.
Но делать так не надо. Этот подход устарел уже много лет как.
Когда-то очень давно это был приемлемый компромисс с учетом тогдашних возможностей CSS. Когда эти сетки переводили с флоатов на флексы, уже тогда это начинало попахивать чем-то странным.
Сегодня, если дизайнер или фронтендер тянет подобную сетку в проект, это следует трактовать единственным образом - "я не хочу думать, я хочу сбагрить всё это не приходя в сознание и как можно быстрее".
Сейчас надо использовать гриды и (пока еще осторожно) контейнерные запросы.
А можно всё-таки поинтересоваться, что вы делаете? Вернее, для чего. Области применения такой сетки?
Почему flex, а не grid, если уж так хочется работать в контексте колонок, кажется в гриде не придется вычислять размер колонки
Размер генерируемого кода можно уменьшить, если вынести число колонок в CSS custom properties
Автору поставил плюсы за старания.
Но делать так не надо. Этот подход устарел уже много лет как.
Когда-то очень давно это был приемлемый компромисс с учетом тогдашних возможностей CSS. Когда эти сетки переводили с флоатов на флексы, уже тогда это начинало попахивать чем-то странным.
Сегодня, если дизайнер или фронтендер тянет подобную сетку в проект, это следует трактовать единственным образом - "я не хочу думать, я хочу сбагрить всё это не приходя в сознание и как можно быстрее".
Сейчас надо использовать гриды и (пока еще осторожно) контейнерные запросы.
Адаптивная flex-сетка на CSS: разбираем реализацию на атомы