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

Свойство grid-column

Мы добавили в список новую карточку, содержимое которой не помещается в одну колонку. Дизайнер настаивает, что уменьшать текст и картинку нельзя. Как быть? Разрешим карточке занять две колонки.

Сделать это можно с помощью свойства grid-column:

.element {
  grid-column: span 2;
}

Элемент из примера растянется на две колонки:

1
2
3
4. Карточка, занимающая две колонки.
5

Чтобы растянуть грид-элемент, используют слово span, а после указывают число колонок, которые элемент должен занять:

// Этот элемент растянется на три колонки
.wide-element {
  grid-column: span 3;
}

// А этот – на четыре
.very-wide-element {
  grid-column: span 4;
}

Нам нужно, чтобы карточка в списке заняла две колонки. Добавим ей дополнительный класс и используем свойство grid-column, чтобы растянуть её. Поэкспериментируем с разными значениями span и разной шириной страницы.

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

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

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

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

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

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

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