Знакомство с CSS-сеткой (CSS grid)

Сетки и «дробные единицы»

Как следует из названия, CSS Grid работает в пределах макета сетки: наборе строк и столбцов (не отличается от таблицы).

Чтобы создать сетку с помощью CSS Grid, нужно указать, сколько столбцов должно быть в ширину, и сколько из этих столбцов должен занимать какой-либо конкретный фрагмент содержимого. При желании вы также можете указать точное количество строк и очень точно расположить содержимое в определенных строках и столбцах. Или и строках, и в столбцах одновременно.

Если бы эта фотография из заметок ниже являлась CSS Grid, она была бы шириной в три столбца и высотой в три строки.

Вы можете использовать всевозможные единицы измерения для ширины столбцов, но наиболее универсальной и полезной является fr или дробная единица измерения.

Дробная единица равна одному столбцу или строке из общего числа столбцов или строк. В приведенной выше сетке заметок 3x3 1fr равен одной трети или 33,3%. В сетке из четырех столбцов она будет равна одной четвертой или 25%. И так далее.

Создание простой сетки из трех столбцов

Автор считает, что рассматривать все плюсы CSS Grid лучше на конкретных примерах. Давайте начнем с построения простой сетки из трех столбцов.

Для всех наших примеров используется вариант разметки ниже.

<div class="grid-thirds">
	<div class="container-1">.container-1</div>
	<div class="container-2">.container-2</div>
	<div class="container-3">.container-3</div>
	<div class="container-4">.container-4</div>
	<div class="container-5">.container-5</div>
</div>

Есть только три вещи, которые вам нужны для построения простой сетки:

• Свойство display: grid, которое активирует CSS Grid.
• Свойство grid-template-columns, которое определяет количество столбцов в сетке.
• Свойства grid-column-gap и grid-row-gap, которые определяют, сколько места находится между каждой строкой и столбцом.

	.grid-thirds {
		/* активирует CSS Grid */
		display: grid;

		/* Создает 3 столбца, каждая шириной 1 fr */
		grid-template-columns: 1fr 1fr 1fr;

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

Наша сетка состоит из трех столбцов, но у нас есть пять областей для содержимого. «Дополнительные» контейнеры автоматически создают новую строку, которая также имеет три столбца.

Демо

Сокращения, чтобы создать сетку еще проще

Для свойства grid-template-columns все ваши столбцы будут иметь одинаковую ширину, функция repeat() позволяет вам повторять ширину столбца указанное количество раз. (Да, у CSS есть функции, и да, это язык программирования.)

Первый аргумент - это количество повторений, а второй - значение, которое нужно использовать.

	.grid-thirds {
	  /* Также создается 3 столбца, каждый шириной 1fr */
	  grid-template-columns: repeat(3, 1fr);
	}

Если разрыв между строками и столбцами должен быть одинаковым, то grid-column-gap и grid-row-gap могут быть объединены в одно свойство grid-gap.

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

Макет «Святой Грааль» (Holy Grail)

Если вы познакомились с Интернетом довольно давно (: cough: если вы такие же старые, как автор статьи cough :), вы можете вспомнить макет «святого Грааля» (Holy Grail), который состоит из верхнего колонтитула, нижнего колонтитула, двух боковых панелей и содержимым в середине.

На данный момент макеты такого вида являются не такими актуальными.

В любом случае, давайте создадим макет «две боковые панели с содержимым посередине» с помощью CSS Grid. Мы собираемся использовать тот же HTML, что и раньше, но изменим класс на .grid-sidebars.

Таким образом, единственное, что нам нужно изменить, это свойство grid-template-columns. Мы дадим ему значение 1fr 3fr 1fr.

.grid-sidebars {
	display: grid;

	/* Создаем сетку в которой первый и последний столбец равен 1fr, а второй вдвое шире */
	grid-template-columns: 1fr 3fr 1fr;

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

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

Чтобы вычислить ширину 1fr, подсчитайте общее количество дробных единиц. Один над этим числом (1 / n) даст вам дробь, а деление на 100 даст вам процент. В этом примере всего пять дробных объединений, поэтому 1fr составляет одну пятую от макета или 20%.

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

Опять же, вы можете увидеть дополнительные столбцы, обернутые в новую строку, которая следует тому же шаблону сетки.

Поддержка браузерами

CSS Grid работает во всех современных браузерах, но не в IE.

Это то, что автор статьи на 100% комфортно воспринимает как прогрессивное улучшение. IE получит простой макет с одним столбцом. Все остальные получают модные макеты.

Более сложные макеты

В следующей статье мы рассмотрим, как сделать более сложные макеты с помощью CSS Grid.

Оригинал статьи: An introduction to CSS Grid

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

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