CSS Grid: полное руководство с примерами и практикой

1 месяц назад ●

0 комментариев

●

CSS Grid: полное руководство с примерами и практикой

Содержание показать

CSS Grid Layout — это система компоновки элементов в веб-дизайне. В отличие от старых методов верстки, таких как float или inline-block, Grid позволяет создавать сложные адаптивные макеты с минимальным количеством кода. Это не просто инструмент — это новый стандарт современной вёрстки.

Если вы верстаете сайты, блоги, интернет-магазины или личные проекты — знание CSS Grid обязательно. Оно экономит часы работы и делает код чище.

Почему CSS Grid? Решение проблем старой верстки

До появления Grid разработчики сталкивались с множеством ограничений:

Сложно было создать двухколоночный макет
Центрирование по вертикали требовало хаков
Адаптивность достигалась через JavaScript или костыли
Невозможно было точно контролировать положение элементов

CSS Grid решил эти проблемы, став мощным инструментом для:

Макетов страниц
Сеток карточек
Панелей управления
Адаптивных интерфейсов

✅ Поддержка во всех современных браузерах (Chrome, Firefox, Safari, Edge) с 2017 года
✅ Работает без JavaScript
✅ Совместим с Flexbox

Основы CSS Grid: контейнер и элементы

Как и Flexbox, Grid работает с двумя уровнями:

Контейнер (grid container) — родительский элемент
Элементы (grid items) — дочерние элементы

CSS

.grid-container {
    display: grid;
}

.grid-container {
    display: grid;
}

HTML

<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

Теперь все .item становятся элементами сетки, которые можно точно позиционировать по строкам и столбцам.

Ключевые свойства контейнера

1. `grid-template-columns` — управление столбцами

Определяет количество и размер столбцов.

CSS

.container {
    grid-template-columns: 100px 200px 1fr;
}

.container {
    grid-template-columns: 100px 200px 1fr;
}

Три столбца: два фиксированных и один занимает оставшееся пространство (1fr).

Единицы измерения:

Единица	Описание
`px`	Фиксированная ширина
`%`	Процент от ширины контейнера
`fr`	Доля свободного пространства
`auto`	По содержимому
`minmax(250px, 1fr)`	Минимум 250px, максимум — растяжение

CSS

/* Адаптивная сетка */
.grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Адаптивная сетка */
.grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

✅ Идеально для сетки товаров, карточек новостей, галерей.

2. `grid-template-rows` — управление строками

Аналогично столбцам, но по вертикали.

CSS

.container {
    grid-template-rows: 80px 1fr 60px;
}

.container {
    grid-template-rows: 80px 1fr 60px;
}

Шапка высотой 80px, основной контент (1fr), футер 60px.

`grid-template-areas` — визуальное проектирование макета

Самое мощное свойство Grid. Позволяет «нарисовать» макет текстом.

CSS

.layout {
    display: grid;
    grid-template-areas:
        "header"
        "nav"
        "footer";
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    min-height: 100vh;
}
.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.footer { grid-area: footer; }

.layout {
    display: grid;
    grid-template-areas:
        "header"
        "nav"
        "footer";
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    min-height: 100vh;
}
.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.footer { grid-area: footer; }

✅ Читаемо, понятно, легко поддерживать.

4. `gap` — промежутки между ячейками

Заменяет старые margin и padding.

CSS

.container {
    gap: 20px;
}

.container {
    gap: 20px;
}

Аналог gap есть и в Flexbox — современный стандарт.

5. `justify-items` и `align-items` — выравнивание

Управляют положением элементов внутри ячеек.

CSS

.container {
    justify-items: center; /* по горизонтали */
    align-items: center;   /* по вертикали */
}

.container {
    justify-items: center; /* по горизонтали */
    align-items: center;   /* по вертикали */
}

6. `grid-auto-flow` — порядок заполнения

Определяет, как размещаются лишние элементы.

CSS

.container {
    grid-auto-flow: row dense;
}

.container {
    grid-auto-flow: row dense;
}

✅ dense заполняет «дыры» — идеально для мозаики, тегов, рекомендаций.

Свойства элементов: точное позиционирование

1. `grid-column` и `grid-row`

Указывают, между какими линиями должен находиться элемент.

CSS

.item {
    grid-column: 2 / 4; /* с линии 2 до 4 */
    grid-row: 1 / 3;    /* с линии 1 до 3 */
}

.item {
    grid-column: 2 / 4; /* с линии 2 до 4 */
    grid-row: 1 / 3;    /* с линии 1 до 3 */
}

Или с span:

CSS

.item {
    grid-column: span 2; /* занимает 2 столбца */
}

.item {
    grid-column: span 2; /* занимает 2 столбца */
}

2. `grid-area` — объединение свойств

Краткая запись: row-start / col-start / row-end / col-end

CSS

.item {
    grid-area: 1 / 2 / 3 / 4;
}

.item {
    grid-area: 1 / 2 / 3 / 4;
}

Или по имени:

CSS

.sidebar {
    grid-area: sidebar;
}

.sidebar {
    grid-area: sidebar;
}

`justify-self` и `align-self`

Выравнивают отдельный элемент.

CSS

.item {
    justify-self: end;
    align-self: center;
}

.item {
    justify-self: end;
    align-self: center;
}

Практические примеры использования

Пример 1: Макет страницы (header, sidebar, content, footer)

CSS

.layout {
    display: grid;
    grid-template-areas:
        "header header"
        "nav    main"
        "footer footer";
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    min-height: 100vh;
    gap: 1px;
}

.header { grid-area: header; background: #242f3d; color: white; }
.nav    { grid-area: nav;    background: #f7f8fc; }
.main   { grid-area: main;   background: #ffffff; padding: 20px; }
.footer { grid-area: footer; background: #242f3d; color: white; text-align: center; }

.layout {
    display: grid;
    grid-template-areas:
        "header header"
        "nav    main"
        "footer footer";
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    min-height: 100vh;
    gap: 1px;
}

.header { grid-area: header; background: #242f3d; color: white; }
.nav    { grid-area: nav;    background: #f7f8fc; }
.main   { grid-area: main;   background: #ffffff; padding: 20px; }
.footer { grid-area: footer; background: #242f3d; color: white; text-align: center; }

✅ Чистый, понятный, легко масштабируется.

Пример 2: Адаптивная сетка карточек

CSS

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    background: gray;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    background: gray;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

HTML

<div class="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

<div class="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

✅ Автоматически подстраивается под экран:

На мобильных — 1 карточка
На планшетах — 2
На десктопах — 3–4

Пример 3: Центрирование по центру

CSS

.center {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.center {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

✅ Лучше, чем Flexbox, потому что:

Короче
Надёжнее
Поддерживает двумерное выравнивание

Пример 4: Мозаичный макет (Masonry)

CSS

.masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 100px;
    gap: 10px;
    grid-auto-flow: dense;
}

.item.wide  { grid-column: span 2; }
.item.tall  { grid-row: span 2; }
.item.big   { grid-column: span 2; grid-row: span 2; }

.masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 100px;
    gap: 10px;
    grid-auto-flow: dense;
}

.item.wide  { grid-column: span 2; }
.item.tall  { grid-row: span 2; }
.item.big   { grid-column: span 2; grid-row: span 2; }

✅ Эффект «кирпичной кладки» без JavaScript.

CSS Grid vs Flexbox: что выбрать?

Критерий	Grid	Flexbox
Измерения	Двумерный	Одномерный
Назначение	Макеты страниц	Компоненты
Адаптивность	Отличная	Отличная
Сложность	Выше	Ниже

✅ Grid: для всей страницы, сеток, сложных форм
✅ Flexbox: для навигации, кнопок, карточек

Лучшие практики и советы

Используйте minmax() для адаптивности
Применяйте grid-template-areas для читаемости
Не бойтесь fr — это доля свободного пространства
Проверяйте в DevTools — в Chrome есть встроенный Grid-инспектор

Заключение: почему Grid — будущее верстки

CSS Grid — это must-have для любого фронтенд-разработчика.

Он:

Упрощает создание сложных макетов
Повышает адаптивность
Уменьшает количество кода
Поддерживается всеми современными браузерами

CSS Grid: полное руководство с примерами и практикой

Почему CSS Grid? Решение проблем старой верстки

Основы CSS Grid: контейнер и элементы

Ключевые свойства контейнера

1. grid-template-columns — управление столбцами

Единицы измерения:

2. grid-template-rows — управление строками

grid-template-areas — визуальное проектирование макета

4. gap — промежутки между ячейками

5. justify-items и align-items — выравнивание

6. grid-auto-flow — порядок заполнения

Свойства элементов: точное позиционирование

1. grid-column и grid-row

2. grid-area — объединение свойств

justify-self и align-self

Практические примеры использования

Пример 1: Макет страницы (header, sidebar, content, footer)

Пример 2: Адаптивная сетка карточек

Пример 3: Центрирование по центру

Пример 4: Мозаичный макет (Masonry)

CSS Grid vs Flexbox: что выбрать?

Лучшие практики и советы

Заключение: почему Grid — будущее верстки

1. `grid-template-columns` — управление столбцами

2. `grid-template-rows` — управление строками

`grid-template-areas` — визуальное проектирование макета

4. `gap` — промежутки между ячейками

5. `justify-items` и `align-items` — выравнивание

6. `grid-auto-flow` — порядок заполнения

1. `grid-column` и `grid-row`

2. `grid-area` — объединение свойств

`justify-self` и `align-self`