Внутренняя компоновка: размеры по содержимому

Интринсивный дизайн, термин, введённый Дженом Симмонсом, означает предоставление содержимому возможности самостоятельно определять свой размер вместо навязывания явных размеров в пикселях. CSS предоставляет ключевые слова для интринсивного задания размеров, благодаря которым макеты естественным образом становятся адаптивными без переопределений, привязанных к контрольным точкам.

min-content: наименьший размер, в который помещается содержимое без переполнения (для текста перенос выполняется на каждой границе между словами). max-content: размер, необходимый для отображения содержимого в одной строке без переноса. Оба значения отражают фактические размеры содержимого.

fit-content эквивалентен min(max-content, max(min-content, available)). Он увеличивается вместе с содержимым до размера доступного пространства, а затем выполняет перенос. Это идеальный вариант для кнопок и подписей, ширина которых должна соответствовать тексту, но не превышать ширину контейнера.

minmax(min, max) в grid-template-columns задаёт минимальный и максимальный размер трека. minmax(200px, 1fr) создаёт столбец шириной не менее 200px, который может расширяться. В сочетании с auto-fill это создаёт адаптивные сетки с интринсивным изменением размеров.

Оба режима заполняют строку максимально возможным числом треков. auto-fill сохраняет пустые треки, оставляя число столбцов неизменным. auto-fit сворачивает пустые треки, поэтому заполненные треки расширяются и занимают всё доступное пространство. Используйте auto-fit для макетов, определяемых содержимым и расширяющихся на всю доступную ширину.

clamp(min, preferred, max) ограничивает значение заданными пределами. font-size: clamp(1rem, 2.5vw, 1.5rem) изменяет размер от 1rem до 1.5rem в зависимости от ширины области просмотра — это плавная типографика без медиазапросов.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) создаёт адаптивную сетку, которая на очень узких областях просмотра состоит из одного столбца и автоматически добавляет столбцы по мере появления свободного места. Без медиазапросов и без JavaScript.

aspect-ratio: 16/9 заставляет элемент сохранять пропорции при изменении его ширины. В сочетании с width: 100% контейнер видео заполняет родительский элемент и всегда сохраняет соотношение 16:9 без JavaScript и хитростей с отступами в процентах.

Интринсивный дизайн хорошо сочетается с логическими свойствами CSS (inline-size, block-size, margin-inline) и позволяет создавать макеты, работающие как в горизонтальном, так и в вертикальном режиме письма. Интринсивное задание размеров автоматически адаптируется к направлению письма.

Фиксированный: width: 300px — всегда 300px независимо от содержимого. Интринсивный: width: fit-content — ширина соответствует содержимому в пределах заданных ограничений. Для изменения фиксированных макетов нужны контрольные точки, а интринсивные макеты самостоятельно подстраиваются под содержимое и контекст.

Интринсивный дизайн наиболее эффективен, когда содержимое естественным образом отличается по размеру. Принудительное использование интринсивного задания размеров для известного и однородного содержимого добавляет сложность без пользы. Используйте явные размеры для фиксированных элементов оболочки интерфейса (навигации, панели инструментов), а интринсивное задание размеров — для областей содержимого.

Чем auto-fit отличается от auto-fill в свойстве grid-template-columns?

Интринсивный дизайн использует ключевые слова CSS для задания размеров (min-content, max-content, fit-content), minmax() вместе с auto-fit, clamp() для плавного масштабирования и aspect-ratio, чтобы создавать макеты, определяемые размерами содержимого, а не контрольными точками области просмотра. В результате получаются естественно адаптивные макеты с меньшим количеством CSS и медиазапросов.