Авг. 09

Обзор 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 остается революционной областью для веб. Его возможности в сочетании с другими инструментами позволят создавать более интересные и гибкие раскладки без лишних стилей, не думая про отдельные фреймворки.