Контейнер сетки и элементы сетки

До сих пор вы раскладывали элементы с помощью flexbox в одном направлении: в строку или в столбец. Но во многих макетах нужны оба направления сразу: в фотогалерее, в наборе карточек или на целой странице с шапкой, меню, содержимым и подвалом. Для этого в CSS есть сеточная раскладка, CSS Grid. Она располагает элементы сразу в строках и столбцах, немного как таблица.

Для этого урока мы подготовили новую версию страницы о кошке. В ней есть шапка, меню, описание и шесть карточек с породами кошек. Карточки лежат в div с классом cards, а у каждой карточки класс card. Пока они расположены одна под другой.

Сетка включается так же, как flexbox: родительскому элементу мы задаём display: grid, и он становится контейнером сетки. Его прямые потомки становятся элементами сетки. Именно прямые потомки: заголовки и абзацы внутри карточек элементами сетки не являются, они остаются внутри своих карточек.

Затем свойством grid-template-columns мы задаём столбцы сетки. Его значение — список ширин столбцов через пробел, и каждая ширина создаёт один столбец:

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

В этой сетке два столбца: первый шириной 200 пикселей, а второй — 100. Элементы заполняют сетку в том порядке, в каком они идут в HTML: слева направо, а когда строка заполнена, продолжают в следующей. Браузер создаёт столько строк, сколько нужно, и высота каждой строки зависит от её содержимого. (Строки тоже можно задать вручную свойством grid-template-rows, но обычно мы доверяем это браузеру.)

На картинке сетка из трёх столбцов и двух строк. Место, где строка пересекается со столбцом, называется ячейкой, и каждый элемент занимает одну ячейку. Пронумерованные линии между столбцами и строками — это линии сетки. Они понадобятся нам позже на этом уроке.