CSS Container Queries, часть 2, продуктовый кейс
Во второй главе курса про CSS Container Queries мы разберём реальный продуктовый кейс — создание карточки услуги, с резиной и адаптивностью от контейнера.
Если вы ещё не знакомы с выражениями от контейнера, то рекомендуем пройти первую главу курса, в которой разбирается синтаксис и основные возможности CSS Container Queries.
Для начала создадим разметку карточки. Добавим элемент .wrapper. Это будущий контейнер, к которому мы будем делать контейнерные запросы.
Добавим главный компонент карточки.
Карточка будет состоять из двух частей: основной с контентом и дополнительной с изображением.
Добавим в основную часть иконку услуги в виде сердца, заголовок, текст и ссылки.
А в дополнительную часть добавим декоративную иконку и небольшой текст.
На этом разметка завершена. Переходим к стилям.
Задаём для .wrapper основные сеточные стили: стопроцентную ширину, минимальную и максимальную ширину, автоматические маргины для центровки и паддинги.
Получим контейнер, который тянется до ширины 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 завершена.
