Создание гридов

Мы создадим базовую сетку, которая будет выглядеть следующим образом:

Базовая сетка 3x3 (3 строки и 3 столбца)

Вот код:

Давайте рассмотрим данный код подробнее.

Разметка HTML для сетки выглядит следующим образом:

<div id="grid">
  <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, состоящий из элементов, вложенных внутрь внешнего элемента. Но для наших целей внешний <div> — это контейнер сетки. Все элементы, вложенные в него, являются элементами сетки.

Но это не является гридом, пока мы не применим к нему CSS. Вот стилевой код, который создаёт грид:

#grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2vw;
}

Это правило применяется к внешнему <div> (потому что ему присвоен идентификатор #grid).

Вот объяснение каждой декларации в этом правиле:

display: grid

Превращает элемент в контейнер сетки — и это всё, что требуется для создания грида. Теперь у нас есть контейнер и элементы сетки. Значение grid генерирует блочный контейнер. Вы также можете использовать display: inline-grid для создания строчного контейнера или display: subgrid для создания подсетки (это значение предназначено для использования внутри самих элементов сетки).

grid-template-rows: 1fr 1fr 1fr

Явно задаёт строки сетки, каждое значение представляет собой размер строки. В данном случае все значения равны 1fr (это означает, что они занимают всё свободное пространство), но с тем же успехом можно использовать и другие единицы, например 100px, 7em, 30% и др. Вы также можете указать названия строк вместе с размерами дорожек (т. е. размерами строк и столбцов).

grid-template-columns: 1fr 1fr 1fr

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

gap: 2vw

Устанавливает промежуток — это интервал между элементами сетки. Здесь мы используем единицу длины vw (это относительно ширины области просмотра), но мы могли бы с тем же успехом использовать 10px, 1em и др. Свойство gap — это сокращённое свойство для row-gap и column-gap.

Другая часть кода просто применяет различные стили к элементам сетки:

#grid > div {
  font-size: 5vw;
  padding: .5em;
  background: gold;
  text-align: center;
}

Функция repeat()

С помощью функции repeat() можно повторить определение дорожки заданное число раз.

Например, вместо этого:

grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

Вы можете написать такое:

grid-template-rows: repeat(5, 1fr);

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