Грид-разметка CSS: модуль CSS Grid Layout

Flexbox, конечно, великолепный инструмент, но его основная цель — помочь с позиционированием элементов только в одном измерении, горизонтальном или вертикальном. Для двумерного макета всей страницы мы в основном полагались на такие фреймворки, как Bootstrap или Foundation, которые предоставляют нам классы, которые мы можем использовать для создания макета сетки. Новый модуль CSS Grid Layout, который скоро будет доступен в браузерах, должен изменить все это.

Давайте рассмотрим CSS Grid с очень кратким обзором. Во-первых, несколько ключевых моментов, о которых следует помнить:

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

Основные понятия CSS Grid

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

Грид-линия: элементы располагаются в сетке, а линии отмечают, где начинается и заканчивается элемент. Поэтому грид-линии играют ведущую роль в работе CSS Grid. Грид-линии столбцов нумеруются слева направо, начиная с 1; линии строк нумеруются сверху вниз, начиная с 1.

Грид-полосы (или грид-треки) – это пространство между двумя грид-линиями.

Грид-область – это область, определяемая любыми 4 линиями сетки.

Грид-ячейка – пространство на пересечении конкретного столбца и строки; наименьшая единица, возможная в сетке.

Родительские и дочерние элементы грид-разметки

Грид-разметка включает в себя элемент контейнера и дочерние элементы, которые становятся элементами сетки (немного напоминает flexbox). Для элемента контейнера достаточно установить display: grid. Строки и столбцы сетки определяются с помощью grid-template-columns и grid-template-rows.

Начнем со следующей разметки:

<div class="container">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
  <div class="box box-5">Box 5</div>
  <div class="box box-6">Box 6</div>
  <div class="box box-7">Box 7</div>
</div>

Вот как мы можем определить CSS для контейнера:

.container {
  display: grid;

  grid-template-columns: 150px 150px 80px;
  grid-template-rows: 100px auto;

  grid-gap: 10px 15px;
}

Мы получаем интересный результат, даже не задавая никаких свойств элементам сетки:

Обратите внимание: мы добавили 10 пикселей по горизонтали и 15 пикселей по вертикали между ячейками, используя grid-gap.

Теперь мы можем пойти дальше и определить начальную и конечную линии конкретных элементов. Элементы, которые не размещены в сетке явно, будут размещены согласно алгоритму. Мы используем grid-column-start, grid-column-end, grid-row-start и grid-row-end, чтобы определить, где в сетке начинается и заканчивается элемент:

.box-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.box-3 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

Также можно использовать сокращения grid-column и grid-row (результат будет такой же):

.box-1 {
  grid-column: 1 / 3;
}

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

Вот что получится:

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

Поддержка CSS Grid Layout

Этот модуль по умолчанию поддерживается в Firefox, начиная с версии 52. Также он полностью поддерживается в последних версиях Chrome и Opera, а еще в IE и Edge, но с более старым синтаксисом.

Дополнительные материалы

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

Вот несколько отличных ресурсов для изучения тонкостей грид-разметки CSS:

Tags:

Добавить комментарий