Ниже мы разберём, как создать адаптивную карточку товара, используя Grid для макета и Flexbox для внутренних элементов. Если вам нужно быстро вывести товар с изображением, ценой и кнопкой «Купить», а при этом обеспечить корректное отображение на телефонах, планшетах и десктопах, то этот материал именно для вас. Мы обсудим, какие свойства Grid и Flexbox помогут добиться плавного перехода между разными точками разъема, а также дадим рекомендации по семантике и семантическим тегам. В результате вы получите готовый шаблон, который легко внедрить в любую тему WordPress, не ломая стили и не создавая лишних зависимостей.
Разбор задачи
Основная цель – построить карточку товара, которая будет выглядеть одинаково привлекательно на мобильных, планшетных и настольных устройствах. Мы хотим, чтобы изображение занимало фиксированное место, а текстовая информация (название, цена, описание) располагалась рядом с ним, но при сужении экрана переходила под изображение. Для этого удобно использовать Grid для общей структуры, а Flexbox – для выравнивания внутри блоков. Такой подход гарантирует, что элементы не обрастут лишними паддингами и не перекроются при изменении ширины окна. Кроме того, мы будем использовать семантические теги, чтобы повысить SEO и доступность.
Пошаговое решение
1. Создаём контейнер article.card и задаём ему display:grid с двумя колонками: minmax(200px, 1fr) и auto. Это гарантирует, что изображение всегда будет иметь минимум 200 px, а остальная часть – адаптироваться. 2. Внутри первой колонки располагаем img с width:100% и object-fit:cover, чтобы картинка не растягивалась. 3. Во второй колонке создаём блок div.info и ставим ему display:flex, flex-direction:column, justify-content:space-between. Это позволит надписи, цене и кнопке «Купить» занимать ровно доступное пространство. 4. Для мобильных устройств добавляем медиазапрос @media (max-width:600px), в котором меняем grid-template-columns:auto, чтобы карточка стала одноколоночной. 5. Оптимизируем доступность: используем figure и figcaption для изображения, h3 для названия, span.price для цены, и button с атрибутом aria-label. 6. Добавляем небольшую анимацию при наведении кнопки и плавный переход стилей с transition:all .3s ease. 7. Проверяем в WordPress, подключив стили через enqueue_style, чтобы не конфликтовать с темой. 8. Тестируем на разных устройствах, убеждаемся, что карточка сохраняет пропорции и корректно реагирует на изменение ширины окна. 9. Оптимизируем изображения с помощью srcset и sizes, чтобы не загружать лишний вес на мобильных. 10. Финальные шаги: проверяем валидность HTML, минимизируем CSS и добавляем комментарии для будущих правок. После выполнения этих шагов вы получите полностью адаптивную карточку товара, работающую на всех устройствах и готовую к интеграции в ваш проект WordPress.
Рабочий код
/* Основной контейнер карточки */
.card {
display: grid; /* Grid‑контейнер */
grid-template-columns: 1fr 2fr; /* изображение 1/3, контент 2/3 */
gap: 1rem; /* Пробелы между колонками */
align-items: start; /* Выравнивание по верхнему краю */
padding: 1rem;
border: 1px solid #ddd;
border-radius: 0.5rem;
max-width: 800px; /* Ограничение ширины */
margin: auto;
}
/* Секция изображения */
.card__image {
width: 100%;
height: auto;
border-radius: 0.5rem;
}
/* Секция контента */
.card__content {
display: flex; /* Flex‑контейнер для вертикального стекания */
flex-direction: column; /* Элементы друг над другом */
justify-content: space-between; /* Распределение по высоте */
height: 100%;
}
.card__title {
font-size: 1.5rem;
margin: 0 0 0.5rem 0;
}
.card__price {
font-size: 1.25rem;
color: #e91e63;
margin: 0.5rem 0;
}
.card__btn {
align-self: flex-start; /* Кнопка не растягивается */
padding: 0.5rem 1rem;
background: #2196f3;
color: #fff;
border: none;
border-radius: 0.25rem;
cursor: pointer;
}
/* Адаптивность */
@media (max-width: 600px) {
.card {
grid-template-columns: 1fr; /* Один столбец */
}
.card__content {
margin-top: 1rem;
}
}Типичные ошибки
1. Переиспользование одинаковых классов для разных блоков – приводит к конфликтам стилей.
2. Не задавать фиксированную высоту изображения – изображение растягивается и ломает пропорции.
3. Использовать только Flexbox без Grid – сложнее управлять колонками в больших макетах.
4. Оставлять margin‑auto на больших экранах – карточка сжимается слишком сильно.
FAQ
Какая разница между Grid и Flexbox?
Grid отвечает за положение элементов по двум осям (rows & cols), а Flexbox – только по одной. Grid удобнее для сложных сеток, Flexbox – для однострочных списков.
Можно ли использовать только Flexbox для двух колонок?
Да, но понадобится вложенный flex‑контейнер для второй колонки. Grid упрощает задачу, но Flexbox тоже работает, если правильно задать flex-basis.
Как обеспечить поддержку IE11?
IE11 поддерживает Flexbox полностью, но Grid – частично. Для IE11 уберите grid‑правила и используйте flex‑свойства.
Заключение и чек‑лист
✔ Разметка разделена на .card, .card__image, .card__content.
✔ Grid задаёт колонку для изображения и контента.
✔ Flex внутри контента обеспечивает вертикальное выравнивание.
✔ Медиа‑запросы переключают макет на одну колонку при <600px.
✔ Классы именованы BEM‑стилем для избежания конфликтов.
✔ Проверка в разных браузерах: Chrome, Firefox, Safari, Edge, IE11 (если нужен).