6. Grid

CSS: Основы CSS Grid

Иллюстрация к уроку

Что такое CSS Grid?

CSS Grid Layout (или просто Grid) — это двумерная система макетов CSS, которая позволяет разработчикам создавать сложные, отзывчивые дизайны веб-страниц, определяя строки и столбцы. В отличие от Flexbox, который оптимизирован для одномерных макетов (строка или столбец), Grid идеально подходит для создания макетов всего сайта или отдельных его секций, требующих одновременного контроля над строками и столбцами.

Основные концепции Grid

Grid Container (Контейнер сетки): Элемент, к которому применено display: grid или display: inline-grid. Он является родителем для элементов сетки.
Grid Items (Элементы сетки): Прямые потомки Grid Container.
Grid Line (Линия сетки): Разделительная линия между столбцами или строками.
Grid Track (Дорожка сетки): Пространство между двумя линиями сетки (столбец или строка).
Grid Cell (Ячейка сетки): Пространство, образованное пересечением дорожки столбца и дорожки строки.
Grid Area (Область сетки): Прямоугольная область, занимающая несколько ячеек сетки.

Grid Container: Определение сетки

Для начала работы с Grid необходимо определить элемент как контейнер сетки:

.grid-container {
  display: grid; /* Включает режим сетки */
}

Определение строк и столбцов:

grid-template-columns: Определяет количество и размеры столбцов.
grid-template-rows: Определяет количество и размеры строк.

Единицы измерения: px, %, em, rem, auto, minmax(), fr (fraction — доля оставшегося пространства), repeat().

Пример 1: Простая 3x2 сетка

Создадим сетку из трех столбцов равной ширины и двух строк.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Три столбца, каждый занимает 1 долю */
  grid-template-rows: 100px auto;    /* Первая строка 100px, вторая автоматически */
  gap: 10px;                         /* Отступы между ячейками */
  background-color: #eee;
  padding: 10px;
}

.grid-item {
  background-color: #64b5f6;
  border: 1px solid #2196f3;
  padding: 15px;
  text-align: center;
}

Grid Items: Размещение элементов

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

grid-column-start, grid-column-end
grid-row-start, grid-row-end
Сокращенные свойства: grid-column, grid-row (например, 1 / span 2 или 1 / 3)

Пример 2: Элемент занимает несколько ячеек

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Три равных столбца */
  grid-template-rows: repeat(2, 100px);  /* Две строки по 100px */
  gap: 10px;
}

.item-1 {
  grid-column: 1 / 3; /* Начинается с линии 1, заканчивается на линии 3 (занимает 1 и 2 столбец) */
  background-color: #ffcc80;
}

.item-2 {
  grid-row: 2 / 3;    /* Занимает 2-ю строку */
  background-color: #a5d6a7;
}

Именование линий и областей (Grid Areas)

grid-template-areas позволяет семантически называть области макета, делая код более читаемым.

Пример 3: Макет с Header, Nav, Main, Aside, Footer

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* Колонка для навигации, основная, сайдбар */
  grid-template-rows: auto 1fr auto;   /* Header, контент, Footer */
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  height: 300px;
  gap: 10px;
}

.header { grid-area: header; background-color: #ef9a9a; }
.nav    { grid-area: nav;    background-color: #a7d08c; }
.main   { grid-area: main;   background-color: #e57373; }
.aside  { grid-area: aside;  background-color: #64b5f6; }
.footer { grid-area: footer; background-color: #90a4ae; }

Автоматическое размещение элементов

Когда элементы сетки не имеют явно заданных позиций, они размещаются автоматически.

grid-auto-flow: Определяет, как автоматически размещаются элементы — по строкам (row, по умолчанию) или по столбцам (column). dense пытается заполнить пустые места.
grid-auto-columns, grid-auto-rows: Определяет размер для автоматически создаваемых (неявных) столбцов/строк.

Пример 4: Автоматическое размещение с grid-auto-flow: column

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column; /* Элементы заполняются по столбцам */
  grid-auto-rows: 70px; /* Автоматически созданные строки будут 70px */
  gap: 10px;
  /* Дополнительные стили для grid-item, как в Примере 1 */
}

Выравнивание в Grid

Grid предлагает мощные средства выравнивания, аналогичные Flexbox:

Для содержимого ячейки (Grid Items):
- justify-items: выравнивает элементы вдоль оси столбцов (горизонтально).
- align-items: выравнивает элементы вдоль оси строк (вертикально).
- place-items: сокращение для align-items и justify-items.
Для сетки внутри контейнера (Grid Tracks):
- justify-content: выравнивает все дорожки столбцов внутри контейнера (горизонтально).
- align-content: выравнивает все дорожки строк внутри контейнера (вертикально).
- place-content: сокращение для align-content и justify-content.

Пример 5: Выравнивание элементов

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 100px); /* Фиксированные столбцы */
  grid-template-rows: repeat(2, 100px);
  height: 300px; /* Контейнер больше, чем сумма дорожек */
  background-color: #eee;
  gap: 10px;

  justify-content: center; /* Выровнять сетку по центру горизонтально */
  align-content: center;   /* Выровнять сетку по центру вертикально */

  justify-items: end;      /* Выровнять содержимое каждого элемента в конце ячейки */
  align-items: center;     /* Выровнять содержимое каждого элемента по центру ячейки */
}
.grid-item {
  background-color: #81c784;
  border: 1px solid #388e3c;
  padding: 10px;
}

Типичные ошибки

Забыть display: grid: Самая частая ошибка, без этого свойства остальные свойства Grid не работают.
Путать Grid и Flexbox: Grid — для двумерных макетов, Flexbox — для одномерных. Они отлично работают вместе (например, Flexbox внутри Grid ячейки).
Неправильное использование fr: fr распределяет оставшееся пространство. Если у вас есть фиксированные элементы, fr будет работать после их учета.
Слишком много явных линий: Используйте repeat(), fr, auto и grid-template-areas для более чистого и гибкого кода.
Использование Grid для всех элементов: Grid предназначен для макро-разметки (общая структура), а не для каждой кнопки или иконки.

🎯 Практика

Создайте адаптивный макет страницы, который на больших экранах имеет следующую структуру: Header во всю ширину, под ним Sidebar слева и Main справа, а внизу Footer во всю ширину. Пример структуры:

[Header]
[Sidebar] [Main]
[Footer]

Используйте grid-template-areas для семантики, fr для гибкости. Добавьте отступы (gap).

💡 Совет

Используйте инструменты разработчика (DevTools) вашего браузера. Большинство современных браузеров имеют отличные отладчики CSS Grid, которые визуализируют линии сетки, треки и области, значительно упрощая отладку и понимание сложного макета. Ищите опцию “Grid” во вкладке “Layout” или “Elements”.