• Теория
  • Теория

Раскладка каталога интернет-магазина: создаём внутренний грид

Мы отлично справились с предыдущими заданиями, но не время расслабляться.

Вторым интерфейсом, который мы сверстаем с помощью гридов, будет каталог интернет-магазина. И как в любом каталоге здесь тоже есть: шапка, фильтр, сортировка, ассортимент товаров и подвал.

Ну, а чтобы вы не заскучали и чтобы открыть вам приём, который удобен в реальных проектах — мы возьмём часть с шапкой и подвалом из прошлой страницы и сделаем из неё каркас. Общему контейнеру дадим класс inner-grid, что обозначает «внутреннюю» страницу. Внутрь поместим отличающийся контент, который будет самостоятельным и независимым элементом, что даёт нам возможность делать исправления, ничего не ломая, или легко заменить его на что-то другое.

Вот как будет выглядеть итоговая сетка:

Схематичное изображение сетки страницы

Обратите внимание на исходный код задания: контейнер .inner-grid содержит три ряда — подвал имеет фиксированный размер, у ряда с шапкой автоматическая высота, как и в прошлом задании, а под контент отводится оставшееся место:

.inner-grid {
  display: grid;
  grid-template-rows: auto auto 100px;
}

В качестве контентной части выступает элемент .catalog-grid, который тоже в свою очередь мы сделаем грид-контейнером. Один грид-контейнер будет включён во второй. Магия!

Начнём, как и в прошлый раз, с создания грида, задания грид-интервалов и объявления трёхколоночной сетки.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Знакомство с гридами» тренажёра «Погружение в техники раскладок» можно после регистрации и оформления подписки.