Знакомство с сабгридами, subgrid
В этой демонстрации разберём, как использовать CSS Subgrid для создания идеальной сетки карточек товаров независимо от их наполнения.
У нас есть две карточки, контент которых сильно различается: картинки разных размеров и пропорций, разная длина заголовков и текстов с описанием.
У контейнера с карточками уже есть стили для выстраивания карточек в ряд. Сами карточки имеют базовое оформление.
Мы сфокусируемся на выстраивании сетки внутри карточек с помощью гридов, которые позволят избавиться от лишних обёрток. Сетка будет состоять из трёх колонок. Первая колонка занимает всё свободное место, две другие — по ширине равны ширине контента.
Временно спрячем стили контейнера .cards-container, чтобы они нас не отвлекали.
Определим области сетки, чтобы разместить элементы карточки.
Добавим промежуток между элементами внутри карточки, чтобы они не прилипали друг к другу.
Добавим нижний внутренний отступ для карточки.
Перейдём к настройке отдельных элементов карточки. Первая на очереди — картинка с изображением товара. Для начала разместим её в нужной области.
Зададим пропорции и область покрытия.
Далее разместим в нужной области артикул товара.
Уберём внешние отступы по умолчанию и добавим внутренние, чтобы отлепить элемент от края карточки.
Разместим заголовок в нужной области.
По аналогии с артикулом поработаем над отступами.
Разместим описание товара в нужной области.
Настроим отступы для него.
Разместим цену товара.
Поработаем с отступами.
Поставим на место кнопку Добавить в избранное.
И кнопку Добавить в корзину.
Вернём стили родительского элемента карточек, которые мы прятали ранее.
Напомним, что это грид-контейнер с двумя колонками, гэпами и паддингами.
Наша задача — сделать так, чтобы элементы, находящиеся внутри разных карточек, были привязаны друг к другу по высоте. То есть высота заголовка в одной карточке должна быть привязана к высоте заголовка в другой, высота описания к высоте описания и так далее.
Чтобы связать высоту элементов в соседних карточках, используем Subgrid.
CSS Subgrid позволяет элементу наследовать треки (строки или столбцы) родительской сетки.
Эту особенность используем для выравнивания строк карточки. Для начала в правило .card добавим grid-template-rows: subgrid;. Для картинок выравнивание сработало, теперь они одинаковой высоты, но остальные элементы наслоились друг на друга.
Укажем grid-row: span 5. Это означает, что элемент должен занимать 5 строк родительской сетки. Элементы перестали наслаиваться друг на друга.
Для родительского элемента зададим grid-template-rows с тем же количеством строк, что и у карточек. Высота строк определяется автоматически в зависимости от содержимого.
В некоторых браузерах высота картинок может оказаться больше, чем нужно.
Чтобы избавиться от проблемы с высотой, можно изменить грид-шаблон у контейнера. Зададим первой строке фиксированную высоту, а остальным четырём строкам — автоматическую.
Высоту картинок в карточках почти всегда фиксируют, поэтому это хорошее решение.
Сабгриды позволили нам привязать друг к другу высоту элементов, которые находятся в разных контейнерах. Причём это текстовые элементы, высота которых меняется очень часто.
Давайте изменим заголовок в одной из карточек. Обратите внимание, что описания в разных карточках сохранили привязку по вертикали.
Попробуем поэкспериментировать с текстами всех блоков — привязка по высоте сохранится везде.
С помощью сабгридов можно связывать по высоте любое количество текстовых элементов, которые находятся в разных контейнерах.
