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

Основные компоненты CSS Grid Layout

Инструмент содержит в себе несколько компонентов для разметки, а также некоторые уникальные элементы, например, функции. Рассматриваемые свойства приписываются внутри тега в HTML-документе. Начнем изучение структуры с них:

  • Контейнеры - самая базовая часть структуры. Обычно в качестве него используется тег <div>, которому присваивается базовый класс .grid. Из контейнера уже полноценно строится дальнейшая сетка. Для примера создадим пока 9 div’ов с классом .grid. В CSS-документе их нужно инициализировать с помощью свойства display: grid. Там же для блока можно указывать дополнительные свойства, например, цвет, внутренние отступы и так далее. Однако, чтобы не путаться в собственной верстке, для этих целей рекомендуется использовать отдельный подкласс. Пока не заданы другие Grid-свойства элементы выстроятся вертикально друг за другом в том порядке, в котором они расположены в HTML-документе.
  • Колонки - они похожи чем-то на колонки в таблице. За их отображение отвечает свойство grid-template-columns, которое прописывается в CSS-документе у каждого контейнера или сразу для группы контейнеров, если они должны быть одинакового размера. Свойство grid-template-columns может принимать только значение собственных размеров. Пример: grid-template-columns: 100px 100px 100px. Если задать это свойство трем колонкам, то они распределяться в три колонки, идущих друг за другом.
  • Ряды - еще одно свойство позиционирование элементов в CSS Grid. За них отвечает свойство grid-template-rows. Способно принимать значения высоты ряда. Пример: grid-template-rows: 100px 100px 100px.
  • Отступы. Они нужны, чтобы добавить пространство между колонками и рядами. Свойство обозначается как grid-gap. Сюда можно вписаться два значения: одно для рядов, другое для колонок. Пример: grid-gap: 20px 30px. Если требуется указать одинаковые отступы, то можно просто указать одно общее значение. Также для указания отступов для рядов и колонок существуют отдельные свойства: grid-row-gap (ряды) и grid-column-gap (колонки).

Это базовые свойства и компоненты CSS Grid, которые от обычного CSS не сильно-то отличаются.

Фракции в CSS Grid Layout

Под фракциями здесь подразумеваются специальные адаптивные единицы измерения. Они не имеют фиксированного значения и подстраиваются под ширину и, иногда, высоту экрана. Предположим, что у нас есть три колонки, которым требуется задать один размер во фракциях (fr). Выглядеть это будет так: grid-template-columns: 1fr 1fr 1fr. В таком случае вся доступная ширина делится на три равных части, в каждой из которой располагается по колонке.

Конечно же, можно выставлять неравнозначные значения, например, grid-template-columns: 2fr 1fr 1fr. В таком случае первая колонка занимает ⅔ свободного пространства, а оставшееся пространство делят остальные две. Также доступна возможность комбинировать фракции и стандартные единицы измерения, например, пиксели: grid-template-columns: 200px 1fr 1fr. В этом примере первая колонка займет фиксированный размер в 200 пикселей, а оставшееся пространство будет поделено поровну между двумя оставшимися.

Функции CSS Grid Layout

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

Функций в CSS не так много, поэтому подробно рассмотрим каждую из них.

Функция repeat()

Она предназначена как раз для сокращения количества написанного кода, так как позволяет задавать количество и размер колонок без лишних повторений в разметке. Например, запись grid-template-columns: 1fr 1fr 1fr 1fr выстраивает 4 колонки по 1fr каждую. Однако ее можно записать короче с использованием функции repeat: grid-template-columns: repeat(4, 1fr). Первый аргумент - количество колонок, второй их размер.

По аналогии можно сократить запись, где колонки разных и фиксированных размеров. Например: grid-template-columns: 100px 200px 100px 200px преобразуется в grid-template-columns: repeat(2, 100px 200px). Обратите внимание, что размеры в аргументе указываются без запятой. Ею разделяется только желаемое количество колонок и размеры.

Функция minmax() для колонок и рядов

Она используется для создания отзывчивых интерфесов, задавая размер в зависимости от ширины окна. У функции может быть два аргумента: минимальный размер и максимальный, до которого контент может расширяться в колонке/ряде. Когда размер окна будет меняться, то меняться будет и размер элементов в заданных диапазонах.

Рассмотрим применение данной функции на таком примере: grid-template-columns: minmax(100px, 500px) 100px 100px 100px. Первая колонка будет резиновой, а вторая уже фиксированного размера. Достигнув минимального размера в 100 px колонка перестанет уменьшаться, даже если размер окна будет становиться меньше. В таком случае просто появляется горизонтальная полоса прокрутки.

Также рассмотрим пример для рядов: grid-template-rows: 50px minmax(50px, auto) 50px. Здесь логика работы примерно такая же, как в случае с колонками, только условия выставляются уже для всего ряда. Кстати, что для колонок, что для ряда можно задать значение auto в качестве аргумента функции. Оно означает, что ряд/колонка будет расширяться так сильно, как этого потребует контент.

Работа с сетками и направлениями

Главное удобство и фишка CSS Grid - это сетки. Собственно, с ними и идет основной объемы работы в ходе верстки. За направление контента отвечает свойство grid-auto-flow. Оно способно принимать два значения:

  • row - размещение контента слева-направо, посредством заполнения каждой строки поочередно и добавление новых по мере необходимости;
  • column - выстраивает контент в направлении сверху-вниз, с заполнением поочередно каждого столбца и добавлением новых в случае необходимости.

Разберем конкретный пример с сеткой:

Это была создана явная сетка, то есть в свойствах было добавлено grid-template-columns и grid-template-rows, которые как раз и задают размеры и параметры сетки. В итоге получится два ряда по 100 px и один без фиксированных значений по ширине, а также с отступами по 20 px друг от друга.

Пример стандартной сетки в CSS Grid Layout

Работать с сетками вам придется в любом случае, даже если вы не прописали для этого никаких специальных свойств. Такие сетки называются неявными и формируются автоматически с параметрами, установленными по умолчанию. Однако ею все равно можно управлять с помощью свойств grid-auto-rows и grid-auto-columns.

Линии сетки и перемещение ячеек

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

Линии сеток с обозначениями

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

  • grid-column-start - указывает, с какой вертикальной линии идет начало ячейки, например, при grid-column-start: 1 ячейка будет выстраиваться относительно первой линии сетки;
  • grid-column-end - указывает, на какой вертикальной линии следует закончить ячейку;
  • grid-column - позволяет объединить два предыдущих свойства по типу: grid-column: 2 / 4. Первое значение - линия старта, а второе линия окончания ячейки. Они обязательны должны быть разделены символом косой черты.

Рассмотрим на конкретном примере: у нас есть одна ячейка, но ее нужно расположить на месте 2 и 3 ячеек, оставив при этом на ее старом месте пустоту. По умолчанию первая ячейка располагается между вертикальными линиями 1 и 2. Ее удобнее всего будет стилизовать по селектору потомства :nth-child(1). Для корректного обращения делаем такую запись:

.grid > div:nth-child(1)

Где .grid - это общее обращение к классу контейнера, а div:nth-child(1) обращение к конкретному элементу, входящему в этот блок. В данном случае к первому. Если требуется обратиться к какому-то другому элементу, то просто напишите его номер в скобках. С помощью свойств grid-column-start: 2; и grid-column-end: 4; можно добиться расположение ячейки на тех позициях, которые требовались: между второй и четвертой линиями, оставив при этом пустующей пространство между 1 и 2 линиями.

Пример нестандартного расположения ячеек

Можно также растянуть ячейку на весь ряд. Это легко сделать, включив обратную нумерацию grid-column: 1 / -1. Хотя, конечно, можно просто написать номер крайней линии, но это актуально в том случае, если количество ячеек или размер у вас фиксированное и новые не создаются автоматически.

Растягивание ячейки на всю доступную ширину

Рассмотрим также движение по рядам (между горизонтальными линиями). В качестве примера просто переместим первую ячейку на место второй. Нужно будет выполнить стилизацию по селектору: .grid > div:nth-child(2).

Тут есть вариант использовать для позиционирования свойства grid-row-start и grid-row-end. Однако можно использовать свойство grid-row, указав значения через косую черту. Второе значение указывать в нашем случае необязательно.

Перемещение ячеек по рядам

Плавающие ячейки

Ячейки, у которых не определен ряд, называются плавающими. Свободное место рядом с ними ничего не может заполнить. Однако после определения свойства grid-row, такая возможность у соседних ячеек появляется. На скриншоте выше у второй ячейки по бокам наблюдаются большие отступы - это пустующее место, которое появилось из-за того, что первая ячейка по прежнему является плавающей. Если ей определить ряд, то пустующее пространство будет занято ячейками 3 и 4, как показано на скриншоте ниже.

Пример определения ряда ячейки 1

Настройка переноса контента

Чтобы во время верстки не появлялся горизонтальный скролл, а все элементы корректно переносились, воспользуйтесь функциями minmax() и repeat() и свойствами auto-fill и auto-fit. Например, в верстке присутствует сетка на 6 колонок, где каждая по 400 пикселей. Скорее всего, она не поместится полностью и возникнет вертикальная прокрутка, следовательно, часть контента будет скрыта от пользователя. Исправить ситуацию можно с помощью такого свойства:

grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));

В этом случае размер колонок будет подстраиваться в диапазоне от 50px до 1fr так, чтобы они полностью влезают в экран. Рассмотрим значения auto-fill и auto-fit:

  1. В первом случае заполняется как можно больше ячеек. Предпочтение отдается минимальному разрешенному размеру даже в тех случаях, когда свободное место еще имеется.
  2. Во втором случае идет подстраивание размеров ячеек под общий размер доступного пространства.

Выравнивание контента внутри колонок и рядов

По умолчанию ячейка растягивается на всю доступную ширину колонки и ряда. За настройку их расположения внутри колонок и рядов отвечают свойства:

  • justify-items для колонок;
  • align-items для рядов.

Оба способны принимать следующие свойства:

  • stretch - стоит по умолчанию и делает растягивание контента на всю доступную ширину;
  • start - контент идет от начала колонки или ряда;
  • end - контент идет от конца колонки или ряда;
  • center - центрирует ячейку.

Заключение

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