Сравнение флексов и гридов на карточке товара
Иногда чтобы понять какая технология, гриды или флексы, подходит лучше, стоит попробовать обе на одном элементе.
Доверстаем блок карточки товара сначала на гридах, а потом — на флексах, и попытаемся понять, что подходит лучше. Для этого продолжим вёрстку страницы каталога.
Перед тем как начать делать внутреннюю сетку элемента, временно удалим внешние блоки, чтобы сфокусироваться на карточке товара. И добавим обёртку, которая будет центровать карточку.
Приступим к вёрстке с помощью гридов.
Добавим гриды карточке товара. Как видим, практически ничего не изменилось, кроме того, что элементы начали занимать свои грид-области, так как мы ещё не добавили шаблон.
Опишем шаблон.
По горизонтали пять рядов:
- Картинка, максимальной высотой 200px.
- Заголовок, с учётом многосточности.
- Цена.
- Кнопка «Купить» с учётом многосточности.
- Отступ снизу
16px.
Опишем шаблон.
По вертикали три колонки. Первая и последняя — это отступы, чтобы контент не прилипал к краям карточки товара, а средняя — это контент.
Растянем изображение на все колонки.
Заголовок, цену и кнопку расположим в центральной колонке с помощью grid-column: 2 / 3;.
Добавим заголовку и цене отступ снизу.
Сетка карточки на гридах готова.
Но ради любопытства давайте посмотрим, что будет если в шаблоне auto заменить на min-content.
За счёт auto получилось прижать кнопку к низу блока, так как элемент с ценой стал автоматической высоты.
Получилась какая-то неразбериха. Кнопка точно не должна быть с min-content, так как она никогда не изменит свой размер, поэтому ей нужно поставит auto.
А чтобы кнопка всегда была снизу, добавим ей align-self: end.
Сетка карточки на гридах готова.
Подведём итог по гридам:
- сложно придумать будущий шаблон;
- сложно описывать шаблоны;
- исправление шаблона в конце стилизации;
- ячейки для отступов;
- лучше за счёт упрощения HTML-структуры компонента и в следствии уменьшения количества стилей. В флексах будут дополнительные обёртки (далее);
А теперь пофантазируем, как сделать такое перестроение на гридах.
Разметку менять вообще не придётся, нужно будет перенастроить грид-шаблон и области грид-элементов.
Приступим к вёрстке на флексах.
Для начала посмотрим, из чего состоит разметка карточки товара:
- обёртка
.product-card; - изображение товара, обёрнутое в ссылку;
- заголовок товара, обёрнутый в ссылку;
- цена;
- ссылка «Купить».
Структура плоская, за исключением изображения и заголовка, которые пришлось обернуть в ссылки.
По макету все элементы карточки товара располагаются сверху вниз. Применим к карточке флексы и направим главную ось сверху вниз.
Заметим, что все текстовые элементы в карточке товара имеют внутренний отступ, чтобы текст не прилипал к краям карточки товара.
Для того чтобы все тексты не прилипали, добавим обёртку.
Теперь добавим внутренние отступы, чтобы текст не прилипал к краям карточки товара.
Как видим, флексы внутри текстовой части карточки товара перестали работать из-за обёртки, поэтому придётся добавить ещё флексов, но уже для текстовой обёртки. На первый взгляд, сетка карточки готова. Давайте вернём остальные карточки в разметку.
И этим карточкам не забудем добавить внутренние обёртки.
В разметке скопируем обёртку текстовой части и добавим для всех оставшихся карточек товара.
Карточки имеют разное наполнение и из-за этого разную высоту. В каких-то карточках двухстрочный заголовок, в каких-то трёхстрочный.
Растянем с помощью flex-grow контентную часть, так она займёт всё свободное пространство, а точнее высоту родителя. Попереключайтесь между этим и предыдущим шагом, и увидите, как зелёная область внизу каждой карточки растягивается по высоте.
Прижмём кнопку «Купить» к низу карточки товара.
Добавим заголовку и цене отступ снизу.
Вёрстка на флексах закончена. Подведём итог по флексам:
- пришлось добавить обёртку для контентной текстовой части карточки товара;
- из-за этого пришлось добавлять для одной карточки флексы дважды;
- пришлось растянуть обёртку с текстовым контентом на всю карточку товара, чтобы в одном ряду визуально карточки занимали одинаковую высоту.
Сравним гриды с флексами в контексте карточки товары.
Плюсы гридов перед флексами:
- никаких дополнительных обёрток;
- в примере с флексами приходилось вкладывать флексы в флексы, с гридами ничего вкладывать не нужно;
- более плоская структура разметки.
Плюсы флексов перед гридами:
- решение в лоб. Не нужно помнить о сложных шаблонах и постоянно за ними следить;
- проблемы появляются линейно.
А теперь пофантазируем, как сделать такое перестроение на флексах.
Если такая задача возникнет, то придётся сильно усложнять разметку и стили.
Вернём разметку сайта. На этом вёрстка карточки товаров на флексах и гридах закончена.
