В прошлой лекции мы научились создавать сетку. Теперь научимся размещать элементы в нужных местах, объединять ячейки и управлять выравниванием.

1. grid-column — объединение колонок

Позволяет элементу занимать несколько колонок.

Что такое «линии» в Grid?

В Grid есть невидимые линии, которые разделяют колонки и строки. Например, если у вас 3 колонки, то линий будет 4:

• Линия 1 — левый край первой колонки
• Линия 2 — между первой и второй колонкой
• Линия 3 — между второй и третьей колонкой
• Линия 4 — правый край третьей колонки

Запись grid-column: 1 / 3 означает: элемент начинается с линии 1 и заканчивается на линии 3, то есть занимает колонки 1 и 2.

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.item {
    grid-column: 1 / 3;  /* с линии 1 до линии 3 (занимает 2 колонки) */
}

Сокращённая запись с span:

.item {
    grid-column: span 2;  /* занять 2 колонки, начиная с текущей позиции */
}

2. grid-row — объединение строк

Работает так же, как grid-column, но для строк. Линии строк считаются аналогично.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 60px);
}
.item {
    grid-row: 1 / 3;  /* с линии 1 до линии 3 (занимает 2 строки) */
}

3. grid-area — размещение элемента в сетке

grid-area позволяет указать, какие строки и колонки занимает элемент. Записывается так:

grid-area: строка-начала / колонка-начала / строка-конца / колонка-конца

Например: grid-area: 2 / 2 / 4 / 4; — элемент начинается со строки 2 и колонки 2, заканчивается на строке 4 и колонке 4 (занимает 2 строки и 2 колонки).

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 50px);
}
.item {
    grid-area: 2 / 2 / 4 / 4;
}

grid-template-areas — рисуем сетку словами (самый понятный способ)

Как это работает: Вы пишете схему будущей сетки прямо в CSS. Каждая строка в кавычках — это одна строка сетки. Каждое слово — это имя области, которая может занимать одну или несколько ячеек подряд.

Пример:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Как читать эту схему:

• Строка 1: три слова header → объединяются в одну область "header" шириной в 3 колонки
• Строка 2: sidebar (1 колонка) и content content (объединяются в область "content" шириной в 2 колонки)
• Строка 3: три слова footer → объединяются в одну область "footer" шириной в 3 колонки

4. justify-items и align-items — выравнивание всех элементов в ячейках

Управляют выравниванием всех элементов в сетке по горизонтали (justify-items) и вертикали (align-items) внутри своих ячеек.

Возможные значения:

• stretch — растянуть на всю ячейку (по умолчанию)
• start — прижать к началу
• end — прижать к концу
• center — по центру

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    justify-items: center;
    align-items: center;
}

5. justify-self и align-self — выравнивание одного элемента

Переопределяют выравнивание для конкретного элемента.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 130px);
    justify-items: start;
}
.special {
    justify-self: center;
}