Использование CSS Grid для создания современной HTML разметки
WebDEV
На сайте caniuse.com можно узнать, какие браузеры в данный момент поддерживают эту технологию. На момент написания статьи, все основные браузеры (за исключением IE, который никогда не будет поддерживать этот инструмент) уже поддерживают эту технологию, охватывая 84% всех пользователей.
CSS Grid является конкурентом Flexbox. CSS Grid взаимодействует со сложными макетами, потому что он работает с двумя измерениями (строки И столбцы), а Flexbox работает только с одним (строки ИЛИ столбцы).
Создание разметки для сайтов традиционно является сложной темой.
Я не буду вникать в причины этих сложностей, которые сами по себе трудные, но вы можете считать себя очень счастливым человеком, так как на данный момент в вашем распоряжении есть два очень мощных и хорошо поддерживаемых инструмента:
- CSS Flexbox
- CSS Grid
За этими двумя технологиями будущее.
Если вам не нужна поддержка старых браузеров, таким как IE8 и IE9, нет причин использовать такие вещи, как:
- Table layouts
- Floats
- clearfix
- display: table
В этом руководстве есть всё, что вам нужно знать, чтобы перейти от нулевого знания CSS Grid к опытному пользователю.
Основы
CSS Grid активируется на любом элементе (который может быть как div, так и любым другим тегом), просто установите на него display: grid.
Как и в случае с flexbox, вы можете определить свойства главного контейнера и некоторые свойства для каждого отдельного элемента в сетке.
Комбинация этих свойств будет определять конечный вид вашей сетки.
Основными свойствами контейнера являются grid-template-columns и grid-template-rows.
grid-template-columns and grid-template-rows
Эти свойства определяют количество столбцов и строк в сетке, а также устанавливают ширину каждого столбца или строки.
Следующий фрагмент кода определяет сетку с 4 столбцами, шириной 400px и тремя строками с высотой по 100px
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
Вот еще один пример сетки с двумя столбцами и тремя строками:
.container {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px 100px;
}
Автоматически выставляемые размеры
Часто у вас может быть фиксированный размер заголовка, фиксированный размер нижнего колонтитула и основной контент, который является гибким по высоте, в зависимости от его длины. В этом случае вы можете использовать ключевое слово auto:
.container {
display: grid;
grid-template-rows: 100px auto 100px;
}
Разные размеры столбцов и строк
В приведённых выше примерах мы делали простые сетки, используя одни и те же значения для строк и одинаковые значения для столбцов.
Вы можете указать абсолютно любое значение для каждых строк и столбцов, чтобы создать множество разных вариантов дизайна:
.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
}
Другой пример:
.container {
display: grid;
grid-template-columns: 10px 100px;
grid-template-rows: 100px 10px;
}
Добавление пустого пространства между ячейками
Вы можете добавить интервал, используя эти свойства: grid-column-gap и grid-row-gap, или сокращенный синтаксис grid-gap.
Если свойства не указаны, между ячейками не будет отступов.
Пример:
.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
grid-column-gap: 25px;
grid-row-gap: 25px;
}
Тот же макет с использованием сокращённого синтаксиса:
.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
grid-gap: 25px;
}
Смещение нескольких столбцов и строк
Каждый элемент ячейки имеет возможность занимать не более одного поля в строке и горизонтально/вертикально расширяться, чтобы получить больше места при соблюдении пропорций сетки, установленных в контейнере.
Для этого мы будем использовать эти свойства:
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
Пример:
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
.item1 {
grid-column-start: 2;
grid-column-end: 4;
}
.item6 {
grid-column-start: 3;
grid-column-end: 5;
}
На следующем изображении, цифры соответствуют вертикальным линиям, которые разделяют каждый столбец, начиная с первого:
Тот же принцип применяется к grid-row-start и grid-row-end, только в этот раз, ячейка займет больше строк.
Сокращённый синтаксис
Эти свойства имеют сокращённый синтаксис: grid-column и grid-row
Использовать их легко, вот как можно заменить код макета, указанного выше:
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
.item1 {
grid-column: 2 / 4;
}
.item6 {
grid-column: 3 / 5;
}
Другой подход заключается в установке начальных column/row, а также, указанием, сколько из них будут занимать место при помощи span:
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
.item1 {
grid-column: 2 / span 2;
}
.item6 {
grid-column: 3 / span 2;
}
Больше возможностей CSS Grid
Использование единицы измерения fr (доли)
Указание точной ширины каждого столбца и строки не является идеальным в каждом случае.
fr – это новая единица пространства.
Следующий пример делит сетку на 3 столбца с одинаковой шириной, 1/3 доступного пространства каждый.
.container {
grid-template-columns: 1fr 1fr 1fr;
}
Использование процентов и rem
Вы также можете использовать проценты, и смешивать fr, px, rem и проценты:
.container {
grid-template-columns: 3rem 15% 1fr 2fr
}
Использование repeat()
repeat() – это специальная функция, принимает число, которое указывает на количество повторений строк/столбцов и длину каждого из них.
Если каждый столбец имеет одинаковую ширину, вы можете указать разметку с помощью такого синтаксиса:
.container {
grid-template-columns: repeat(4, 100px);
}
С помощью этой записи, вы создадите четыре столбца с одинаковой шириной.
А также можно использовать fr:
.container {
grid-template-columns: repeat(4, 1fr);
}
Указание минимальной ширины строки
Частый случай: Мы имеем боковую панель, которая при изменении размера окна никогда не увеличивается больше определённого количества пикселей.
Вот пример, когда боковая панель занимает 1/4 размера окна и не занимает меньше 200px:
.container {
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Вы также можете установить максимальное значение с помощью ключевого слова auto:
.container {
grid-template-columns: minmax(100px, auto) 9fr;
}
Позиционирование элементов с использованием grid-template-areas
По умолчанию элементы помещаются в сетку, используя их порядок в структуре HTML.
Используя grid-template-areas, вы можете указывать области, чтобы перемещать элементы по сетке, а также создавать их на нескольких строках/столбцах вместо использования grid-column.
Вот пример:
div class="container"> <main> ... </main> <aside> ... </aside> <header> ... </header> <footer> ... </footer> </div>
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
grid-template-areas:
"header header header header"
"sidebar main main main"
"footer footer footer footer";
}
main {
grid-area: main;
}
aside {
grid-area: sidebar;
}
header {
grid-area: header;
}
footer {
grid-area: footer;
}
Несмотря на первоначальный порядок элементов, они размещаются там, где определён grid-template-areas, в зависимости от связанного с ним свойства grid-area.
Добавление пустых ячеек
Вы можете добавить пустую ячейку с помощью точки (.) вместо имени области в grid-template-areas:
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
grid-template-areas:
". header header ."
"sidebar . main main"
". footer footer .";
}
Завершение
Это были основы CSS Grid. Есть много других вещей, которые я не включил в это введение. Я хотел сделать данный обзор очень простым, чтобы вы с лёгкостью начали использовать эту новую систему сеток.