CSS Grid позволяет собрать галерею, где карточки занимают разное число колонок, а ширина элементов подстраивается под контейнер. Для этого задайте сетке базовые колонки, отдельным карточкам назначьте span через grid-column и добавьте адаптивные правила. Такой подход подходит для изображений и контента с заранее известной иерархией; на узких экранах крупные карточки обычно возвращают к ширине одной колонки.
Что учесть до сборки галереи на CSS Grid
- Определите, какие карточки должны визуально выделяться и занимать больше места.
- Подготовьте изображения с понятным соотношением сторон и подписи, которые не зависят от фиксированной высоты.
- Решите, как галерея должна перестраиваться на узком экране: в одну колонку или в несколько более узких.
- Проверьте, что можете редактировать HTML и CSS страницы. Для практики подойдёт любое обучение CSS Grid, где можно сразу проверять изменения в браузере.
Подготовьте карточки и определите, какие из них будут шире
Компоновка с карточками разной ширины подходит для портфолио, подборки фотографий и каталога, где отдельные элементы должны привлекать внимание. Она особенно удобна, когда порядок и роль карточек заранее известны.
Не задавайте разную ширину случайным элементам, если содержимое часто меняется или карточки добавляются автоматически: рисунок сетки может стать непредсказуемым. В таком случае используйте одинаковые карточки или настройте отдельные правила для категорий контента.
Задайте сетке базовые колонки через grid-template-columns
Понадобятся контейнер галереи, элементы-карточки и доступ к таблице стилей. Начните с повторяющихся колонок одинаковой минимальной ширины и промежутка между ними:
.gallery {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}Функция minmax(0, 1fr) помогает колонкам сжиматься в пределах контейнера, а gap задаёт расстояние между карточками. Число колонок здесь - отправная точка: настройте его с учётом ширины макета и содержимого.
Распределите карточки по ширине с помощью grid-column
Перед настройкой отдельных элементов сверьте структуру галереи с макетом и подготовьте классы для карточек, которые должны быть шире остальных:
- Убедитесь, что у каждой карточки есть устойчивый класс или другой понятный селектор.
- Наметьте, какие элементы займут несколько колонок, а какие останутся стандартными.
- Проверьте, что изображения и подписи не имеют фиксированной ширины, мешающей сжатию.
-
Создайте контейнер сетки.
Добавьте класс gallery элементу, который содержит все карточки, и задайте ему display: grid с базовыми колонками. -
Разметьте элементы, которые должны выделяться.
Назначьте им отдельный класс, например gallery__item--wide. Используйте его для карточек, которым нужно занять две колонки. -
Укажите ширину через grid-column.
Правило span 2 растянет карточку на две соседние колонки сетки:.gallery__item--wide { grid-column: span 2; } -
Проверьте автоматическое размещение.
Grid размещает элементы в доступных ячейках по порядку. Если порядок визуально важен, задайте его в разметке, а не полагайтесь на перестановку карточек в CSS. -
Сверьте результат с содержимым.
Просмотрите галерею с настоящими изображениями и подписями: длинный текст или неподходящий формат изображения могут изменить ожидаемый вид карточки.
Настройте адаптивное число колонок без переполнения
Для адаптивной сетки можно позволить браузеру выбирать число колонок по доступной ширине:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: 1rem;
}
.gallery__item--wide {
grid-column: span 2;
}
@media (max-width: 36rem) {
.gallery__item--wide {
grid-column: span 1;
}
}Значение 14rem задаёт ориентир минимальной ширины колонки, а медиазапрос возвращает широкие карточки к одной колонке на узком экране. Адаптивная сетка CSS Grid может перестраиваться автоматически, но правила для элементов со span всё равно нужно проверять отдельно.
- Контейнер не становится шире области просмотра.
- Широкая карточка помещается в доступное число колонок.
- На узком экране элементы не создают горизонтальную прокрутку.
- Длинные подписи переносятся и не выталкивают соседние карточки.
- Ширина изображений ограничена шириной карточки.
- Промежутки между элементами сохраняются после перестроения сетки.
Сохраните аккуратный вид изображений и подписей
При верстке карточек на CSS проверьте распространённые источники визуальных сбоев:
- Не задавайте изображению ширину больше карточки; используйте max-width: 100%.
- Не фиксируйте высоту карточки без необходимости: содержимое может обрезаться или оставлять пустое место.
- Если изображения должны иметь одинаковую форму, задайте им aspect-ratio и подходящее object-fit: cover.
- Не забывайте min-width: 0 у вложенных элементов, если длинный контент растягивает колонку.
- Не используйте grid-column: span 2 без правила для узкого экрана: карточка может не поместиться в сетку.
- Не переставляйте элементы только визуально, если порядок важен для чтения и клавиатурной навигации.
- Не привязывайте оформление к позициям элементов, если состав галереи будет регулярно меняться.
.gallery img {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.gallery__media {
aspect-ratio: 4 / 3;
object-fit: cover;
}Для управляемого кадрирования задайте изображению класс gallery__media и используйте object-fit: cover; если важно показать изображение целиком, оставьте высоту автоматической.
Проверьте галерею на узких экранах и при разном содержимом
Выберите подход, исходя из того, насколько важны фиксированный макет, гибкое заполнение пространства и предсказуемый порядок:
- Автоматическое число колонок: используйте auto-fit и minmax, когда карточки могут равномерно занимать доступную ширину.
- Явные правила для широких элементов: задавайте span выбранным карточкам, если композиция должна повторять заданный макет.
- Одна колонка на узких экранах: сбрасывайте широкие карточки до span 1, когда важны удобное чтение и отсутствие тесной компоновки.
- Одинаковые карточки: откажитесь от разной ширины, если элементы добавляются автоматически и порядок или состав часто меняется.
В качестве CSS Grid галерея примеры можно проверять на копии страницы с тестовыми карточками: меняйте длину подписей и пропорции изображений, не затрагивая рабочий контент.
Нюансы, которые возникают при компоновке Grid-галереи
Обязательно ли задавать карточкам отдельные классы?
Нет, но отдельные классы делают правила ширины явными и удобными для поддержки. Для автоматически формируемого списка можно использовать селекторы по типу содержимого, если структура разметки стабильна.
Что делает grid-column: span 2?
Это правило заставляет элемент занять две колонки сетки. Если доступного места для такого размещения нет, настройте сброс ширины на подходящей контрольной точке.
Почему появляется горизонтальная прокрутка?
Причиной может быть широкая карточка, длинная строка или вложенный элемент с минимальной шириной больше колонки. Проверьте grid-template-columns, min-width у содержимого и поведение элементов со span.
Как сохранить целое изображение без обрезки?
Не задавайте ему фиксированную высоту и используйте height: auto. Свойство object-fit: cover подходит для заполнения заданной рамки, но обрезает часть изображения.
Нужно ли менять порядок карточек на мобильном экране?
Обычно достаточно сбросить ширину выделенных карточек до одной колонки. Сохраняйте порядок DOM-разметки, чтобы визуальная последовательность совпадала с порядком чтения.
Когда лучше отказаться от карточек разной ширины?
Выберите одинаковые карточки, если состав галереи регулярно меняется или сетка заполняется автоматически. Так компоновка будет предсказуемее при разном количестве и содержимом элементов.