CSS Container Queries, часть 2, продуктовый кейс
Во второй главе курса по CSS Container Queries мы разберём реальный продуктовый кейс — карточка услуги с резиновым и адаптивным поведением, которое зависит от контейнера.
Если вы ещё не знакомы с выражениями от контейнера, рекомендуем пройти первую главу курса, в которой разбирается синтаксис и основные возможности CSS Container Queries.
Для начала создадим разметку карточки.
Добавим элемент .wrapper. Это будущий контейнер, к которому мы применим контейнерные запросы.
Добавим <div class="card"> — каркас нашей карточки.
Карточка будет состоять из двух частей: основной и дополнительной.
Добавим в основную часть иконку сердца для обозначения услуги, заголовок, текст и ссылки.
В дополнительную часть добавим декоративную иконку и короткий текст.
C разметкой закончили. Перейдём к стилям.
Определим для .wrapper основные сеточные стили: ширину 100%, минимальную и максимальную ширину, автоматические внешние отступы для центровки и поля.
Получим контейнер, который тянется до ширины 860px, а затем центрируется.
Оформим карточку.
Установим внутренние отступы, изменим цвет текста и применим градиентный фон. Сделаем края карточки закруглёнными и добавим тень для украшения.
По умолчанию определим стили для узкой версии карточки, где контент расположен сверху вниз. Используем flex-direction: column.
Сетку основной части .card__info определим по аналогии с .card: флекс-контейнер с вертикальным направлением главной оси.
Добавим текстовые стили для карточки.
Добавим отступ между ссылками.
Перейдём к дополнительной части карточки.
Выровняем её по центру с помощью флексов.
Зададим стили для текста. Определим размер, максимальную ширину. Обнулим внешние отступы.
Узкая версия карточки готова. Временно установим обёртке ширину 400px, чтобы увидеть это состояние.
Узкая версия хорошо смотрится в диапазоне от 320 до 600 пикселей. Попробуйте изменить ширину .wrapper, чтобы убедиться в этом.
Для наглядности установим для .wrapper фиксированную ширину 800px и начнём создавать широкую версию карточки.
Сначала превратим .wrapper в контейнер, к которому можно делать запросы относительно его ширины. Для этого зададим ему container-type: inline-size;.
Создадим пустой запрос от контейнера с помощью директивы @container.
Укажем условие: если размер контейнера станет больше 600px, то изменим стили. Запрос всегда будет срабатывать, поскольку мы установили для .wrapper ширину 800px.
Переопределим стили широкой версии карточки.
Выстроим элементы внутри флекс-контейнера в две колонки, повернув главную ось .card с помощью flex-direction: row;.
Для основной части .card__info зададим ширину в процентах.
Прижмём элементы к краям флекс-контейнера с помощью justify-content: space-between.
Изменим выравнивание вдоль поперечной оси. Сделаем так, чтобы элементы по вертикали выравнивались по центру.
Немного увеличим пространство между элементами и поля флекс-контейнера. Так карточка в широкой версии будет выглядеть более пропорционально.
Широкая версия карточки готова.
Вернём для .wrapper ширину 100%. Также временно добавим resize: horizontal и overflow: hidden.
Теперь можно посмотреть как перестраивается карточка при изменении размеров контейнера. Для этого потяните влево или вправо область, которая появилась в правом нижнем углу контейнера.
Последние штрихи.
Именуем контейнер.
Используем имя контейнера в директиве @container.
В таком простом компоненте можно обойтись без этого, но в более сложных компонентах именование поможет избежать путаницы.
На этом вторая глава курса про CSS Container Queries завершена.
