Гибкая разметка без медиа-запросов: функции min(), max(), clamp()

[nin-jin]

Стоит отметить, что layout гридов рассчитывается браузером существенно медленнее, чем для флексов. По этой причине мы отказались от гридов пока что.

[greebnic]

Пруф?

[Suliman]

Что если отступ между карточками на десктопе 30px, а в моб. версии 20px? даже если вынести отступ в css переменную (что бы не всю формулу переписывать), как без медиа запроса обойтись?

[wyzemind]

Кроссбраузерность слабая. Кому нужна работа с поддержкой IOS только с 11-й версии (да и то всего лишь частичной)? Да и тот же IE11 тоже ещё очень долго будут требовать. Разве что JS костыль какой-нибудь будет это фиксить

[Xtray]

Функции min() и max() принимают два значения. Наименьшее и\или наибольшее значения соответственно, разделённые запятой. Рассмотрим следующим пример с использованием min():

width: min(100%, 200px);

Здесь мы говорим, что ширина по умолчанию равна 200px, но она не должна быть больше, чем 100% родительского контейнера. Это, по сути, то же самое, что задать:

width: 100%;
max-width: 200px;

Это не то же самое.

[hisbvdis]

Почему не то же?
Вроде поведение одинаковое.
codepen.io/hisbvdis/pen/vYNWEay

[Xtray]

Это я к объяснению придрался :)

Здесь мы говорим, что ширина по умолчанию равна 200px, но она не должна быть больше, чем 100% родительского контейнера.

Тогда как в этом коде:

width: 100%;
max-width: 200px;

ширина по умолчанию: 100%
но не более: 200px

[hisbvdis]

Ясно.
Ну, такая формулировка в оригинале была вроде.