Перевод статьи Grid tidbits, part 1: the Why and Where с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).

CSS Grid Layout — новый способ управления раскладкой в браузере. У него и других модулей (например, flexbox) разные возможности и перспективы, но в чем-то они и перекрываются. Да, и совсем скоро он появится во многих браузерах.  В этой статье мы узнаем, что это за модуль и для чего он нужен.

Это первая из нескольких статей приемлемой длины про «Grid Layout». Вместо того, чтобы написать статью «всё, что нужно знать про Grid Layout» (которая никогда бы не появилась на свет из-за моей лени), я решил разбить её на легко усваиваемые части. Поскольку эта спецификация довольно большая, понятие «приемлемая длина» — очень условное.

Статьи предполагают по крайней мере базовые знания CSS-раскладки, в том числе Flexbox.

Итак. Вы, возможно, скажите «о, замечательно, очередной новый механизм раскладки в CSS, а я только начал разбираться с Flexbox». В таком случае эта статья (и остальные серии) для вас.

Эта статья не про код. Чтобы вы могли оценить пару базовых и пару более продвинутых возможностей, вот как может примерно выглядеть синтаксис Grid:

/* Возьмём такую разметку: */

<div class="grid-container">
  <div class="grid-item"></div>
</div>

/* Элемент grid-контейнер состоит из одной строки с высотой по содержимому и пяти колонок, где первая не меньше 12em и не более 25% по ширине, а остальные четыре делят оставшееся пространство поровну. */

.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: minmax(12em, 25%) repeat(4, 1fr);
}

/* Дочерний элемент в контейнере размещён в первой строке, начинается во второй колонке, занимая при этом две.*/

.grid-item {
  grid-row: 1;
  grid-column: 2/span 2;
}

На первый взгляд это может показаться похожим на Flexbox. Вы задаёте режим отображения и несколько общих правил раскладки для родительского контейнера, и кое-какие правила для дочернего элемента. Есть даже несколько гибких единиц измерения для оставшегося пустого пространства. Давайте на секунду задержимся в стране flexbox.

Flexbox великолепен. Он позволяет определять размер блоков различными способами и учитывать это при построении flex-элементов одной или нескольких строках (либо колонках). Ура горизонтальной раскладке без хаков! К тому же он предоставляет независимость от исходного порядка в разметке, и позволяет намного легче выравнивать и выстраивать контент. С одной стороны, главная сила flexbox — позволить контенту самому определять свой размер, исходя из доступной области или размера содержимого. Это первое важное концептуальное различие между Flexbox и Grid.

Grid нисходящий

Из вышеприведённого примера кода видно, что есть как минимум одно основное отличие от flexbox. В установленном правиле для grid-элемента ничего не сказано о том, как должны определяться его размеры. Весь код для определения размеров прописывается grid-контейнеру. Вы делаете элемент grid-контейнером, делите его на ряды и колонки в определённых точках вдоль двух осей, а затем помещаете дочерний элемент в созданные ячейки.

Если Flexbox уделяет особое внимание определению размера самих flex-элементов, grid сосредоточен больше на создании группы виртуальных ячеек и размещении в них вашего контента. Это не значит, что Grid негибкий — как видно из примера кода, гибкость в достатке. Вы свободно определяете размер колонок и строк (собирательно называемые «grid-полосы») исходя из размера содержимого, оставшейся области, процентов и т.д.

Это значит, что Grid отлично подходит для раскладки более высокого уровня. Его можно использовать для определения общей системы раскладки всей страницы, но скорее вы примените Grid для определения раскладки более крупных разделов на странице. Более подробно примеры использования мы рассмотрим в последующих статьях.

Grid двумерный

При создании раскладки с помощью float-oв, режимов табличного отображения, inline-block’ов или Flexbox можно создать горизонтальные ряды — колонки, выстраиваемые слева направо или справа налево. Некоторые из них позволяют перенос строк. Но как только потребуется охватить одним элементом несколько строк, то придётся прибегнуть к разделению контента при помощи обёрточных элементов. Для сложных раскладок таких элементов может быть множество.

Все эти методы в некотором смысле одномерные: вы создаёте ряды и колонки, которые никак не знают о существовании друг друга. Grid-ы двумерные: вы создаёте раскладку любой сложности. Если хотите увидеть отличную иллюстрацию различий, посмотрите этот доклад Таба Аткинса с CSSDay 2014. А пока взгляните на рисунок 1 — сколько обёрток вам бы понадобилось, чтобы воссоздать это при помощи float-ов или Flexbox? Grid-ы делают это на раз плюнуть.

Рис. 1: сложный 2D-grid.

Grid уже скоро

Итак, сейчас вы возможно скажете «Окей, допустим, для затеи с этим новым Grid-ом есть веские причины. Но она почти нигде не поддерживается!». И да, и нет. Вот какой сейчас расклад.

• Все основные производители браузеров уже взялись за реализацию в этой спецификации.
• Ожидается, что спецификация будет завершена этим летом.
• Grid Layout уже поддерживается в IE10+, но со старым синтаксисом. С ним ещё можно делать основные вещи, но многих крутых новинок не хватает. Требуется префикс ms-, так что вам придётся слегка поправить синтаксис.
• Blink и WebKit довольно далеко продвинулись в их реализации, поэтому можете поиграться с ними в Chrome Canary или WebKit Nightly. Их разработка ведётся одними людьми, так что эти движки идут практически вровень.
• Firefox не слишком отстает, и можно убедиться в этом, заглянув в Bugzilla. Замечание: полагаю, что последние исправления ещё не были внесены в код основной ветки, поэтому только в ночных сборках есть глючная версия, которая скрыта за флагом в about:config.  

Весьма вероятно, что Grid окажется во всех современных браузерах в течение года, даже при осторожной оценке. IE немного в неприятном положении, поскольку он уже поддерживает старую версию с префиксом, так что он, вероятно, на некоторое время отложит реализацию бесспрефиксной современной спецификации до выхода Edge. Держу пари, что они работают над тем, чтобы выпустить Edge, как можно скорее. Safari застрял в каменном веке с их циклами релизов один раз в год, но что поделать, зато в WebKit над этим очень активно работают. Если релизный цикл Safari не изменится, а разработчиков Webkit ничего не затормозит, то, вероятно, Grid появится в Safari для iOS и Mac в следующем году.

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

P.S. Это тоже может быть интересно:

• Псевдокласс :has() — не только «родительский селектор»
• День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari
• Не боритесь с каскадом, управляйте им!