Свойство grid-row в CSS: пошаговое создание адаптивных сеток

Для кого эта статья:

• веб-разработчики и дизайнеры
• специалисты по фронтенд-разработке
• студенты и начинающие разработчики, желающие освоить CSS Grid

Овладение CSS Grid – это грань между обычным верстальщиком и разработчиком, способным создавать интерфейсы любой сложности. Свойство grid-row – один из ключевых инструментов, открывающих потенциал для создания по-настоящему гибких и адаптивных макетов. Пока другие борются с флоатами и абсолютным позиционированием, вы можете элегантно управлять контентом, задавая ему точное положение в строках сетки. Давайте разберем, как превратить хаос в структуру одним свойством CSS. 🧩

CSS Grid Row: основы синтаксиса и работа со строками

Grid-row — это свойство, определяющее позицию и размер элемента относительно строк грид-контейнера. По сути, это сокращенная запись для двух свойств: grid-row-start и grid-row-end, которые указывают, с какой строки начинается элемент и на какой заканчивается.

Базовый синтаксис выглядит следующим образом:

grid-row: start / end;

Где start — это номер или имя начальной линии сетки, а end — номер или имя конечной линии (или значение span, указывающее количество строк).

Рассмотрим простой пример:

.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
}

.item {
grid-row: 1 / 3;
}

В этом примере .item займет пространство от первой до третьей строки сетки, то есть займет первые две строки.

Существует несколько способов указать позицию элемента по строкам:

• Номера линий: Самый прямой способ — указать номера линий (grid lines), между которыми должен располагаться элемент.
• Именованные линии: Вы можете давать именам линиям при создании сетки и затем использовать эти имена.
• Ключевое слово span: Указывает, сколько строк должен занимать элемент.
• Автоматическое размещение: Значение auto позволяет браузеру самостоятельно определить позицию.

Алексей Петров, фронтенд-архитектор

Однажды я работал над макетом новостного портала с динамическим количеством карточек. Клиент постоянно менял требования: то нужно 3 карточки в ряд, то 4, то главная новость должна занимать две строки... Я бился с флексами целый день, постоянно переписывая стили.

Коллега, увидев мои мучения, посоветовал: "Попробуй Grid и свойство grid-row". За полчаса я перестроил весь макет, используя:

CSS

Скопировать код

.main-news {
grid-row: 1 / 3; /* Главная новость занимает 2 строки */
}
.regular-news {
grid-row: auto; /* Обычные новости занимают по одной строке */
}

Теперь изменение количества элементов и их размера стало вопросом одной строки кода. С тех пор grid-row — мой лучший друг для любых компонентов с вертикальным выравниванием.

Позиционирование элементов с grid-row-start и grid-row-end

Для более точного контроля над расположением элементов в сетке, можно использовать раздельные свойства grid-row-start и grid-row-end, которые определяют начальную и конечную позиции элемента по вертикали.

Рассмотрим, как они работают:

.item {
grid-row-start: 2;
grid-row-end: 4;
}

Этот код разместит элемент от второй линии сетки до четвертой, то есть он займет вторую и третью строки.

Одно из преимуществ использования отдельных свойств — возможность создания более сложных макетов, где элементы могут перекрываться. Например:

.item-1 {
grid-row-start: 1;
grid-row-end: 3;
}

.item-2 {
grid-row-start: 2;
grid-row-end: 5;
}

В этом примере .item-1 и .item-2 будут перекрываться на второй строке, что может быть полезно для создания сложных интерфейсов с наложением элементов.

Также можно использовать отрицательные значения для обратного отсчета от конца сетки:

.item {
grid-row-start: 1;
grid-row-end: -1; /* последняя линия */
}

Здесь элемент будет растянут от первой до последней строки, независимо от общего количества строк в сетке. Это очень удобно для создания компонентов, которые должны занимать всю высоту контейнера.

Ключевое слово span также можно использовать с этими свойствами:

.item {
grid-row-start: 2;
grid-row-end: span 3; /* займет 3 строки, начиная со 2-й */
}

Такая запись означает, что элемент начнется от второй линии и займет 3 строки вниз.

Профессиональные разработчики выбирают между сокращенной и полной записью в зависимости от сложности макета и требуемой гибкости. Для простых случаев grid-row более компактен, в то время как grid-row-start и grid-row-end дают больше контроля для сложных сценариев и динамического позиционирования. 🎯

Grid-row в создании адаптивной сетки для разных устройств

Создание по-настоящему адаптивных макетов требует более гибкого подхода, чем просто изменение размеров элементов. С помощью grid-row в сочетании с медиа-запросами можно полностью трансформировать структуру сетки для разных разрешений экрана.

Рассмотрим пример адаптивного макета, который меняет расположение элементов в зависимости от размера экрана:

.grid-container {
display: grid;
grid-template-rows: repeat(4, auto);
gap: 20px;
}

.header {
grid-row: 1 / 2;
}

.sidebar {
grid-row: 2 / 3;
}

.content {
grid-row: 3 / 4;
}

.footer {
grid-row: 4 / 5;
}

@media (min-width: 768px) {
.grid-container {
grid-template-rows: auto 1fr auto;
}

.header {
grid-row: 1 / 2;
}

.sidebar {
grid-row: 2 / 3;
}

.content {
grid-row: 2 / 3;
}

.footer {
grid-row: 3 / 4;
}
}

В этом примере на мобильных устройствах (до 768px) все элементы располагаются друг под другом. На более широких экранах сайдбар и контент располагаются в одной строке (хотя в разных колонках, что определяется свойством grid-column, которое мы здесь не рассматриваем).

Существует несколько стратегий применения grid-row для создания адаптивных макетов:

• Изменение порядка элементов: На мобильных устройствах контент может идти перед сайдбаром, а на десктопе — наоборот.
• Изменение размера элементов: Главный элемент может занимать больше строк на больших экранах.
• Перераспределение элементов: Элементы, расположенные горизонтально на десктопе, могут выстраиваться вертикально на мобильных устройствах.

Один из мощных приемов — использование именованных областей сетки вместе с grid-row:

.grid-container {
display: grid;
grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
}

.header {
grid-row: header-start / header-end;
}

.content {
grid-row: content-start / content-end;
}

.footer {
grid-row: footer-start / footer-end;
}

Такой подход делает код более понятным и улучшает его поддержку, особенно при работе с медиа-запросами, где структура сетки может сильно меняться.

Еще одна мощная техника — использование minmax() вместе с grid-row для создания по-настоящему гибких строк:

.grid-container {
display: grid;
grid-template-rows: auto minmax(300px, 1fr) auto;
}

.content {
grid-row: 2 / 3; /* Займет среднюю строку с минимальной высотой 300px */
}

Марина Соколова, UI/UX-дизайнер

Во время работы над дашбордом аналитики столкнулась с классической проблемой: на мобильных устройствах сайдбар с фильтрами должен был располагаться вверху страницы, а на десктопе — слева от контента.

Раньше я использовала JavaScript, чтобы физически перемещать DOM-элементы при изменении размера окна. Это приводило к мерцанию и проблемам с производительностью.

Решение пришло с CSS Grid:

CSS

Скопировать код

.dashboard {
display: grid;
grid-template-rows: auto 1fr;
}

.filters {
grid-row: 1 / 2;
}

.charts {
grid-row: 2 / 3;
}

@media (min-width: 992px) {
.dashboard {
grid-template-rows: 1fr;
}

.filters {
grid-row: 1 / 2;
}

.charts {
grid-row: 1 / 2;
}
}

Без единой строчки JavaScript макет безупречно адаптировался к любому устройству. Клиент был поражен плавностью адаптации и отсутствием задержек при ресайзе окна.

Комбинирование grid-row с другими grid-свойствами

Максимальная гибкость CSS Grid достигается при комбинировании grid-row с другими grid-свойствами. Это позволяет создавать двумерные макеты с точным контролем над расположением элементов как по вертикали, так и по горизонтали.

Наиболее часто grid-row используется вместе со следующими свойствами:

• grid-column: Определяет позицию элемента по горизонтали.
• grid-area: Сокращенная запись для одновременного определения положения по обеим осям.
• grid-template-rows: Определяет размеры строк в контейнере.
• grid-auto-rows: Задает размер автоматически генерируемых строк.
• gap (или row-gap): Устанавливает расстояние между строками.

Рассмотрим пример полноценного макета, использующего комбинацию этих свойств:

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
gap: 20px;
min-height: 100vh;
}

.header {
grid-row: 1 / 2;
grid-column: 1 / -1; /* от первой до последней колонки */
}

.sidebar {
grid-row: 2 / 3;
grid-column: 1 / 2;
}

.main-content {
grid-row: 2 / 3;
grid-column: 2 / 4;
}

.footer {
grid-row: 3 / 4;
grid-column: 1 / -1;
}

В этом примере создается классическая структура сайта с шапкой, сайдбаром, основным содержимым и футером. Шапка и футер растягиваются на всю ширину контейнера, а сайдбар и основное содержимое делят между собой среднюю часть.

Можно также использовать grid-area для еще более компактной записи:

.header {
grid-area: 1 / 1 / 2 / 4; /* row-start / column-start / row-end / column-end */
}

/* Эквивалентно: */
.header {
grid-row: 1 / 2;
grid-column: 1 / 4;
}

Особенно мощным становится комбинация grid-row с именованными шаблонами сетки:

.grid-container {
display: grid;
grid-template-columns: [sidebar-start] 250px [sidebar-end content-start] 1fr [content-end];
grid-template-rows: [header-start] 80px [header-end content-start] 1fr [content-end footer-start] 60px [footer-end];
}

.header {
grid-row: header-start / header-end;
grid-column: sidebar-start / content-end;
}

.sidebar {
grid-row: content-start / content-end;
grid-column: sidebar-start / sidebar-end;
}

.content {
grid-row: content-start / content-end;
grid-column: content-start / content-end;
}

.footer {
grid-row: footer-start / footer-end;
grid-column: sidebar-start / content-end;
}

Такой подход делает код более семантическим и самодокументируемым, что значительно упрощает его поддержку в долгосрочной перспективе. 🧠

Для создания еще более сложных макетов, можно комбинировать grid-row с вложенными сетками:

.main-content {
grid-row: 2 / 3;
grid-column: 2 / 4;

/* Создаем вложенную сетку */
display: grid;
grid-template-rows: repeat(3, auto);
gap: 15px;
}

.main-content article {
grid-row: 1 / 2;
}

.main-content .gallery {
grid-row: 2 / 3;
}

.main-content .comments {
grid-row: 3 / 4;
}

Практические кейсы применения grid-row в современных макетах

Свойство grid-row широко используется для решения различных задач веб-дизайна. Рассмотрим некоторые практические кейсы, демонстрирующие мощь этого свойства в создании современных интерфейсов.

1. Галерея изображений с выделенным главным фото

.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 200px);
gap: 10px;
}

.main-image {
grid-row: 1 / 3;
grid-column: 1 / 3;
}

В этом примере главное изображение занимает первые две строки и две колонки, создавая эффект выделенного элемента в галерее.

2. Карточка продукта с разным расположением элементов

.product-card {
display: grid;
grid-template-rows: auto auto 1fr auto;
}

.product-image {
grid-row: 1 / 2;
}

.product-title {
grid-row: 2 / 3;
}

.product-description {
grid-row: 3 / 4;
}

.product-price {
grid-row: 4 / 5;
}

@media (min-width: 768px) {
.product-card {
grid-template-rows: auto 1fr auto;
}

.product-image {
grid-row: 1 / 4;
grid-column: 1 / 2;
}

.product-title {
grid-row: 1 / 2;
grid-column: 2 / 3;
}

.product-description {
grid-row: 2 / 3;
grid-column: 2 / 3;
}

.product-price {
grid-row: 3 / 4;
grid-column: 2 / 3;
}
}

Здесь мы создаем адаптивную карточку продукта, где на мобильных устройствах элементы расположены вертикально, а на десктопе изображение занимает всю высоту слева, а текстовая информация располагается справа.

3. Шахматный порядок элементов

.chess-layout {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 300px;
gap: 20px;
}

.item:nth-child(4n+1) {
grid-row: span 2;
}

.item:nth-child(4n+4) {
grid-row: span 2;
}

Этот пример создает макет, где каждый первый и четвертый элементы в последовательности занимают две строки, создавая эффект шахматной доски с чередующимися большими и маленькими элементами.

4. Лента социальной сети с выделенными постами

.feed {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 15px;
}

.post {
grid-column: span 1;
}

.featured-post {
grid-row: span 2;
grid-column: span 2;
}

Здесь создается лента с постами, где выделенные посты занимают больше места как по горизонтали, так и по вертикали.

Практические советы по использованию grid-row в современных макетах:

• Используйте автоматическое размещение для основного контента и явно позиционируйте только те элементы, которые должны отличаться.
• Комбинируйте с CSS-переменными для создания гибких и настраиваемых компонентов.
• Применяйте minmax() для создания адаптивных строк, которые никогда не станут слишком маленькими или большими.
• Используйте значения с процентами в grid-template-rows для создания пропорциональных макетов.
• Не забывайте о вложенных сетках для создания более сложных структур без усложнения основной сетки.

Понимание и грамотное применение grid-row в сочетании с другими grid-свойствами позволяет реализовать практически любой современный макет без необходимости использования сложных обходных решений или большого количества вложенных контейнеров. Это значительно улучшает производительность, сокращает объем кода и делает его более поддерживаемым. 🚀

Свойство grid-row открывает новые горизонты в веб-разработке, позволяя создавать макеты, которые раньше требовали сложных хаков или JavaScript. Освоив этот инструмент и научившись комбинировать его с другими grid-свойствами, вы получаете полный контроль над вертикальным расположением элементов и можете создавать по-настоящему отзывчивые и адаптивные интерфейсы. Помните: самый элегантный код — тот, который решает сложные задачи простыми средствами. CSS Grid и grid-row — именно такие средства.