Обзор CSS Grid – технологии для упрощения разметки HTML-страниц
Появившись в 2011 году, технология CSS Grid продолжает вызывать все больше интереса. Эта статья — небольшое руководство по технологии с кратким описанием самых интересных возможностей и функций. Она будет полезна фронт-енд разработчикам, а также другим специалистам веб-разработки и дизайна.
Спецификация CSS Grid полностью меняет подход к разработке пользовательских интерфейсов, позволяя менять расположение grid-элементов, не затрагивая HTML.
Технология разрабатывалась более 5 лет и начала поддерживаться современными браузерами в середине 2017 года. CSS Grid упрощает описание разметки страницы, делая вёрстку HTML-страниц более адаптивной и простой.
Что такое Grid. Основные термины
Grid коренным образом меняет процесс создания адаптивных интерфейсов, включая:
- фиксированные и гибкие размеры полос;
- расположение элемента;
- управление выравниванием;
- управление перекрывающимся контентом.
Прежде чем приступать к работе с CSS Grid, нужно разобраться с основными терминами. На основе этих терминов построена вся спецификация. Каждый элемент тесно связан друг с другом и отвечает за определенную часть grid-контейнера.
Grid container (грид-контейнер) — это набор пересекающихся горизонтальных и вертикальных grid-линий, которые делят пространство на grid-области, в которые могут быть помещены grid-элементы. Внутри grid-контейнера есть два набора grid-линий: один определяет ось столбцов, другой определяет ось строк.
К Grid container применяется display: grid. Это прямой родитель для всех элементов сетки.
<div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
Элементы сетки — дочерние элементы (прямые потомки) контейнера.
Здесь item — это элемент сетки, но не sub-item.
<div class="container">
<div class="item"></div>
<div class="item">
<p class="sub-item"></p>
</div>
<div class="item"></div>
</div>
Grid lines (грид-линии) — это горизонтальные и вертикальные разделители grid-контейнера. Эти линии находятся по обе стороны от столбца или строки.
Грид-линии формируют структуру контейнера. Автор может задать для элемента имя или числовой индекс, которые может использовать дальше в стилях. Нумерация начинается с единицы.
Элемент Grid line восприимчив к режиму написания, который используется на вашем ресурсе. Например, если вы используете арабский язык или любой другой язык, у которого режим написания справа налево, то нумерация линий будет начинаться с правой стороны.
К грид-линиям можно привязывать грид-элементы — и по номерам, и по именам, как удобнее.
Грид-полосы — то, что ограничено парой соседних грид-линий. Вертикальные грид-полосы — это колонки грида (аналог столбцов таблицы), горизонтальные — ряды (аналог строк).
Grid cell — это наименьшая неделимая единица grid-контейнера, на которую можно ссылаться при позиционировании grid-элементов. Образуется на пересечении grid-строки (ряда) и grid-колонки.Аналог ячейки таблицы.
Grid area (грид-области) — это пространство внутри grid контейнера, в которое может быть помещен один или больше grid элементов. Этот элемент может состоять из одной или более grid ячеек.
Грид-области — прямоугольники из M×N смежных грид-ячеек (1×1 и больше). Каждая грид-область ограничена двумя парами грид-линий (парой вертикальных и парой горизонтальных). В них и размещаются грид-элементы.
Грид-областям тоже можно задавать имена.
Grid track (грид-интервалы) — это пространство между двумя смежными grid-линиями, вертикальными или горизонтальными. Аналог border-spacing в таблице.
.container {
grid-column-gap: 10px;
grid-row-gap: 15px;
}
Различие Grid и Flexbox
Flexbox позволяет управлять элементами в одномерном пространстве.
Grid же — это двухмерный массив (в котором используются колонки и строки).
Это дает нам массу преимуществ по адаптивной трансформации и перестроению.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px auto 100px;
}
Сокращенная запись (rows / column).
.grid {
grid-template: 100px auto 100px / 1fr 1fr 1fr 1fr;
}
See the Pen codepen.io/sukhachov/pen/XYjZQj">Grid template 01 by Yaroslav (codepen.io/sukhachov">@sukhachov) on codepen.io">CodePen.
Строки и расположение элементов
В CSS Grid можно размещать элементы, используя номера строк. Есть возможность именовать строки, используя grid-area, а также возможность привязки к области Grid.
.wrapper {
display: grid;
grid-template-areas:
"a a b"
"a a b"
"c d d";
}
.item1 {grid-area: a;}
.item2 {grid-area: b;}
.item2 {grid-area: c;}
.item2 {grid-area: d;}
See the Pen codepen.io/sukhachov/pen/XYjZQj">Grid template 01 by Yaroslav (codepen.io/sukhachov">@sukhachov) on codepen.io«>CodePen.
Размеры полос (треков)
Сетку в Grid можно создавать с фиксированными размерами («px»), относительными размерами («em», «rem»), а также задавая гибкие размеры — ’%’ или ’fr’ (fraction). Новая единица рассчитывается самостоятельно.
Fr (fraction) не измеряется в привычных единицах, таких как «px», «em», «rem», etc, а рассчитывается самостоятельно.
Калькуляция в «fr»
Например, если доступное место составляет 900 px, и при этом первому элементу достается одна доля, а второму — две, то первый получает 1/3, а второй — 2/3 от 900 px.
<div class="grid"> <div class="box item1">Item 1</div> <div class="box item2">Item 2</div> <div class="box item3">Item 3</div> <div class="box item4">Item 4</div> </div>
.grid {
display: grid;
grid-gap:20px;
grid-template: 100px auto 100px /1fr 80px 3fr 20%;;
}
See the Pen codepen.io/sukhachov/pen/JZRago">Grid template 02 by Yaroslav (codepen.io/sukhachov">@sukhachov) on codepen.io">CodePen.
Оси элементов в Grid
При работе с Grid у нас есть две оси для выравнивания элементов.
Ось column (столбца)
Когда мы используем свойства align-self и align-items, мы меняем выравнивание элемента в области сетки, которую поместили. Свойство align-items устанавливает свойство align-self для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя align-self по элементу сетки.
Ось row (строки)
Элементы управления justify-items и justify-self на оси row/inline:
<div class="grid"> <div class="box item1">Item 1</div> <div class="box item2">Item 2</div> <div class="box item3">Item 3</div> <div class="box item4">Item 4</div> </div>
.grid {
display: grid;
grid-gap:20px;
grid-template: 100px auto 100px / 1fr 1fr 1fr 1fr;
align-items: stretch;
}
.item1 {
background: #f00;
align-self: end;
}
.item2 {
background: #f0f;
align-self: flex-start;
}
.item3 {
background: #008000;
align-self: end;
}
.item4 {
background: #000;
}
See the Pen codepen.io/sukhachov/pen/ERgdNa">Grid template 04 by Yaroslav (codepen.io/sukhachov>@sukhachov) on codepen.io«>CodePen.
Препроцессоры
Препроцессоры Sass и Less поддерживают работу с Grid. Также с CSS Grid работают Stylus и PostCSS.
Софт
Google Chrome и Mozilla подсвечивают гриды расширением Firebug. Также для Chrome есть расширение Gridman — CSS Grid inspector.
Support
CSS-гриды уже есть в Safari 10.3, Firefox 61 и Chrome 63.
В IE10 & IE11 используется префикс «-ms-» для определения свойств Grid. К сожалению, эти браузеры поддерживают только одну из самых ранних ограниченных спецификаций Grid Layout 2011 года.
Современная версия очень отличается от предшествующих.
В поддержке браузерами IE:
- Нет автоматического размещения. Необходимо поместить каждый элемент в сетку, используя линейное позиционирование.
- Невозможна реализация свойств:
grid-gap grid-template grid-template-areas grid-auto-columns grid-auto-rows grid-auto-flow grid-row-end grid-column-end grid-area grid-row-gap grid-column-gap grid-gap justify-self
Это не полный список всех изменений спецификации.
Имеет ли смысл использовать Grid Layout в IE вообще?
Если вы используете Grid, позиционируя элементы средствами CSS вместо использования автоматического размещения, то сетка в Internet Explorer 10, может оказаться очень полезной.
Пример базовой сетки Grid для IE
<div class="grid"> <div class="box item1">Item 1</div> <div class="box item2">Item 2</div> <div class="box item3">Item 3</div> <div class="box item4">Item 4</div> </div>
.grid {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr;
-ms-grid-rows: 4fr;
}
.item1 {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.item2 {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
.item3 {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
.item4 {
-ms-grid-column: 4;
-ms-grid-row: 1;
}
See the Pen codepen.io/sukhachov/pen/KegGbO">Grid IE11 template 05 by Yaroslav (codepen.io/sukhachov">@sukhachov) on codepen.io">CodePen.
Выводы
CSS Grid открывает перед разработчиками мощные возможности, но полноценно реализовать их пока мешает недостаточная поддержка браузеров IE10 и 11 (поддерживаются частично свойства через вендорные префиксы).
Преимущества
- CSS Grid сделает HTML более чистым (разметка проще, отсутствие множества классов и дополнительных тегов).
- Простота макета страницы.
- Гибкость и адаптация при работе с элементами.
- Layout можно изменять, не затрагивая разметку.
- Возможность построения блоков в двумерном пространстве (layout учитывает горизонтальное и вертикальное пространство одновременно).
- Нет ограничений по элементам построения сетки макета.
- Отлично подходит для создания больших макетов и управления ими.
- Возможно создавать сайты с динамическим контентом.
- Медиазапросы не требуются, чтобы адаптироваться к свободному пространству.
Недостатки
- Частичная поддержка в браузерах IE10 и IE11.
Grid остается революционной областью для веб. Его возможности в сочетании с другими инструментами позволят создавать более интересные и гибкие раскладки без лишних стилей, не думая про отдельные фреймворки.
