CSS Container Queries, часть 3, продуктовый кейс
В третьей главе курса по CSS Container Queries мы разберём ещё один продуктовый кейс — адаптивный список карточек, в котором количество карточек в ряду изменяется в зависимости от размера контейнера, а сами карточки тянутся.
Если вы ещё не знакомы с выражениями от контейнера, рекомендуем пройти первую главу курса, в которой разбирается синтаксис и основные возможности CSS Container Queries.
Начнём с разметки.
Добавим элемент .wrapper — контейнер, который будет «отвечать» на наши контейнерные запросы.
Добавим элемент .cards — контейнер для карточек, который будет управлять сеткой карточек.
Добавим разметку первой карточки, которая состоит из:
- заголовка;
- краткого описания;
- кнопки «записаться».
Добавим ещё семь карточек.
Перейдём к стилизации карточки.
Добавим выравнивание по центру с помощью флексов. Зададим внутренние отступы.
Определим параметры текста. Добавим отступы между элементами карточки.
Изменим цвет текста и укажем градиентный фон. Сделаем края карточки закруглёнными.
Сделаем кнопки красивыми: изменим цвета, скруглим углы и добавим внутренние отступы. Определим стили для состояния Наведение.
Зададим карточкам индивидуальные цвета. Для этого добавим в разметку классы-модификаторы.
Укажем для каждого модификатора свой цвет.
Стилизация самих карточек завершена. Переходим к раскладке карточек.
По умолчанию определим стили для узких экранов. На узких экранах карточки выстраиваются в одну колонку. Используем гриды. Опишем простейший грид-шаблон, состоящий из одной колонки. Добавим расстояния между карточками (gap).
Узкая версия компонента готова.
Добавим адаптивность.
Превратим .wrapper в изолированный контейнер, который будет «отвечать» на наши контейнерные запросы. Сразу для удобства укажем имя контейнера.
Зададим контейнеру минимальную и максимальную ширину. Временно установим для него фиксированную ширину 400px.
В узкой версии компонента одна колонка. Когда компонент становится шире 600px, колонок должно быть две. Создадим выражение от контейнера с условием min-width: 600px. В выражении от контейнера изменим грид-шаблон блока .cards.
Ничего не изменилось. Почему? Ответ прост. Ширина изолированного контейнера всё ещё 400px и условие в выражении от контейнера не срабатывает.
Поменяем ширину блока .wrapper на 700px. Контейнерный запрос теперь сработал, сетка перестроилась и состоит из двух колонок.
Добавим ещё одну точку перехода. Если ширина контейнера станет больше 1024px, создадим три колонки.
И снова ничего не произошло, потому что первый контейнерный запрос сработал, а второй ещё нет.
Изменим ширину блока .wrapper на 1100px. Оба контейнерных запроса сработают, но так как второй находится ниже, он переопределит первый. Поведение такое же, как и у медиазапросов.
На этом шаге лучше установить масштаб 0.5x в мини-браузере.
Поэкспериментируем и поменяем местами контейнерные запросы. Вместо трёх колонок получим две.
Оба запроса сработали, но нижний переопределил верхний.
Восстановим прежний порядок контейнерных запросов. Добавим ещё одну точку перехода. При ширине контейнера 1440px и больше будет четыре колонки.
Увеличим ширину блока .wrapper до 1500px и убедимся, что колонок стало четыре.
Теперь можем избавиться от фиксированной ширины контейнера и явно указать, что он должен тянуться на всю ширину родителя. Зададим width: 100% для .wrapper .
Для удобства тестирования адаптивности добавим resize: horizontal и overflow: hidden. Теперь можно менять ширину контейнера и наблюдать, как перестраивается сетка карточек.
Итак, мы создали список карточек, который меняет сетку в зависимости от размеров своего контейнера. Сетка меняется через переопределение грид-шаблона в контейнерных запросах. Для растягивания ширины карточек использовали единицу измерения fr.
На этом третья глава курса про CSS Container Queries завершена.
