Как создавать сложные макеты с помощью CSS-сетки

Определяем сетку

Не смотря на то, что CSS Grid может быть очень простым, он дает вам возможность невероятно точно контролировать, где именно на странице будет расположен определенный элемент.

Все начинается с определения сетки. Для макетов рекомендуется определить столбцы и строки.

Для сегодняшнего примера, давайте создадим сетку 5x5 (пять столбцов и пять строк).

.grid-5-by-5 {
	/* Активируем CSS grid*/
	display: grid;

	/* Создаем 5 столбцов, каждый шириной 1 fr (дробная единица) */
	grid-template-columns: repeat(5, 1fr);

	/* Создаем 5 строк, кадая высотой 1 fr (дробная единица) */
	grid-template-rows: repeat(5, 1fr);

	/* Добавим разрыв 10px между строками и столбцами */
	grid-gap: 10px;
}

Вот как это выглядит

Для наглядности в каждом элементе в сетке находится текст, который отражает порядок элементов в потоке сетки по умолчанию.

Располагаем элементы в нашей сетке

Допустим, у меня в сетке было три предмета.

	<div class="grid-5-by-5">
		<div class="item-1">.item-1</div>
		<div class="item-2">.item-2</div>
		<div class="item-3">.item-3</div>
	</div>

Свойства grid-column и grid-row можно использовать для позиционирования элементов в определенных точках нашей сетки.

Оба свойства имеют два значения: start и end, и они разделены косой чертой (/) (что странно, правда? почему бы не использовать запятую?).

Цифры обозначают линии сетки, а не конкретные поля сетки, что сначала немного сбивает с толку. В нашей сетке 5x5 первый столбец (слева) равен 1, а крайний столбец (справа) - 6.

Смущает? Сетка с пятью полями имеет границу с каждой стороны плюс четыре линии в середине, чтобы разделить ее на столбцы. Чтобы понять, что я имею в виду нарисуйте это на бумаге.

Пример

Допустим, я хотел разместить .item-1 в последних двух столбцах.

Я бы использовал grid-column для этого. Для начального значения я бы использовал 4, линию сетки в начале четвертого столбца. В качестве конечного значения я бы использовал 6, линию сетки после пятого столбца.

	.item-1 {
		grid-column: 4 / 6;
	}

Также я хочу поставить второй ряд и сделать его высотой в два ряда.

Собираюсь использовать grid-row для этого. Я бы присвоил ему значение 2/4, чтобы он начинался на линии сетки второго ряда и заканчивался на линии сетки четвертого ряда.

	.item-1 {
		grid-column: 4 / 6;
		grid-row: 2 / 4;
	}

Точно так же я собираюсь сдвинуть .item-3 на несколько рядов вниз и вправо.

	.item-3 {
		grid-column: 2 / 3;
		grid-row: 4 / 6;
	}

Вот как это выглядит

Вы заметите, что .item-2 - самый первый элемент сетки. Любые элементы, которые специально расположены не по умолчанию, соответствуют нормальному потоку сетки.

Сокращение правил позиционирования

Вы можете объединить grid-column и grid-row в одно свойство: grid-area.

Свойство grid-area имеет четыре значения: row-start, column-start, row-end и column-end, снова разделенные косой чертой (/).

Итак, это:

	.item-1 {
		grid-column: 4 / 6;
		grid-row: 2 / 4;
	}
	.item-3 {
		grid-column: 2 / 3;
		grid-row: 4 / 6;
	}

Становится этим:

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

Вот как это выглядит с grid-area

Лично меня этот сокращенный синтаксис сбивает с толку, но может вам он понравится (или вам придется с ним столкнуться), поэтому важно знать, как он работает.

Перекрывающийся контент

С помощью CSS Grid вы можете расположить контент так, чтобы он перекрывался.

	.item-1 {
		grid-column: 4 / 6;
		grid-row: 2 / 4;
	}
	.item-3 {
		grid-column: 5 / 6;
		grid-row: 3 / 6;
	}

Вот как это выглядит с перекрывающимся контентом

Это может быть использовано для создания интересных макетов, похожих на журналы.

По умолчанию элемент, находящийся в DOM выше, расположен под элементами, которые появляются позже. Вы можете контролировать это, изменяя z-index элемента.

	.item-1 {
		grid-column: 4 / 6;
		grid-row: 2 / 4;

		/* Сейчас .item-1 будет позиционироваться выше, чем .item-3 */
		z-index: 1;
	}
	.item-3 {
		grid-column: 5 / 6;
		grid-row: 3 / 6;
	}

CSS Grid не должен быть сложным

Вы можете создавать удивительно сложные вещи с помощью CSS Grid. И многие учебные пособия, которые вы найдете, помогут вам разобраться в этом.

Надеемся, что статья «Знакомство с CSS-сеткой (CSS grid)» и погружение в расширенные возможности CSS Grid показали вам, что вы без особых сложностей можете создавать довольно интересные макеты.

Оригинал статьи: How to build complex layouts with CSS grid

Автор статьи: Chris Ferdinandi

Перевод: Земсков Матвей