Раньше для адаптива компонентов в зависимости от размера их контейнера приходилось подключать ResizeObserver на JS. Теперь это чистое CSS-решение.
/* 1. Объявляем контейнер */
.card-wrapper {
container-type: inline-size;
}
/* 2. Верстаем внутри карточки с привязкой к ее ширине */
.card-title {
/* 5cqw = 5% от ширины КОНТЕЙНЕРА, а не экрана */
font-size: clamp(1rem, 5cqw, 2rem);
}
/* Адаптируем сетку карточки по ее собственному размеру */
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
Виджет/карточка будет идеально выглядеть и в узкой боковой колонке, и во всю ширину экрана без единой строчки JS-кода.
