Введение в CSS Grid

Что такое CSS Grid

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

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

Если бы эта фотография липких заметок была CSS Grid, она имела бы три колонки в ширину и три строки в высоту.

Фракционные единицы (fr)

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

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

Создание CSS Grid

Представим, что у нас есть элемент .grid-3x3, внутри которого вложено девять элементов.

<div class="grid-3x3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Мы хотим, чтобы этот HTML выглядел как расположение стикеров 3x3 на картинке в начале статьи.

Для начала мы определим свойство display для класса .grid-3x3 со значением grid.

.grid-3x3 {
  display: grid;
}

Затем можно определить количество столбцов grid-template-columns и строк grid-template-rows шаблона сетки в макете.

Для каждого столбца и строки необходимо указать ширину или высоту. Поскольку нужно, чтобы все они были одинакового размера, будем использовать для значения одну фракционную единицу, 1fr.

.grid-3x3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows:  1fr 1fr 1fr;
}

Теперь у нас есть сетка 3x3 из одинаковых по размеру элементов. Вот демонстрация.

See the Pen

Функция repeat()

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

Функция CSS repeat() (да, у CSS есть функции, это настоящий язык программирования) может использоваться для определения повторяющегося количества строк или столбцов и указания одинаковой ширины или высоты для каждого из них.

В качестве аргументов передайте количество повторов значения и значение для повтора.

.grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

Вот обновлённая демонстрация.

See the Pen

Добавление gap

Вероятно, далеко не всегда нужно располагать элементы сетки вплотную друг к другу.

Можно задать объем пространства между каждым элементом сетки с помощью свойства gap.

.grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
}

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

.grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 1rem;
  row-gap: 2rem;
}

Вот демонстрация макета Grid с gap.

See the Pen

Варьирующиеся размеры

В нашем макете Grid все элементы имеют одинаковый размер.

Но что, если нужно, чтобы средняя колонка была в два раза больше левой и правой?

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

.grid-3x3 {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
}

Вот демонстрация столбцов произвольного размера.

See the Pen

Создание универсальной системы

Завтра мы рассмотрим, как использовать CSS Grid для создания универсальной Grid системы для ваших проектов.