Грид-разметка CSS: модуль CSS Grid Layout
Development | Комментировать запись
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: ключевое слово span
- Грид-разметка CSS: как работает нотация repeat
- Грид-разметка CSS: макет Holy Grail
Вот несколько отличных ресурсов для изучения тонкостей грид-разметки CSS:
- Полное руководство по грид-разметке CSS
- Примеры использования грид-разметки.
- Демо-макеты от Джен Симмонс