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

1. display: grid — включаем сетку

Свойство display: grid превращает родительский элемент в грид-контейнер, а его прямые дочерние элементы — в грид-элементы.

.grid-container {
    display: grid;
}

2. grid-template-columns — задаём колонки

Определяет количество и ширину колонок. Каждое значение — ширина одной колонки.

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

3. grid-template-rows — задаём строки

Определяет количество и высоту строк.

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 80px 120px;
}

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

Задаёт отступы между строками и колонками. Не добавляет отступы по краям.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

5. fr — гибкая единица измерения

fr (fraction) — единица, обозначающая долю свободного пространства. Позволяет создавать гибкие сетки, которые подстраиваются под размер контейнера.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

6. repeat() — сокращённая запись

Функция repeat() позволяет не писать одинаковые значения много раз.

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* то же самое, что: 1fr 1fr 1fr 1fr */
}