Лакомые кусочки Grid-раскладки, часть 1: зачем и почему

Перевод статьи 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-ы делают это на раз плюнуть.

grid-2d

Рис. 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. Это тоже может быть интересно:

5 Комментарии

  1. Лиk

    Спасибо. Ждем перевода второй статьи.

  2. Eug

    Долго втыкал в начале, что за «раскладка», думая о клавиатурных и нац.раскладках. Надо какое-то другое слово взять на вооружение. Например размещение, построение, сетка в конце концов.

    1. SelenIT

      Да, с переводом этого слова (layout) всегда было много споров. Но, насколько я в курсе, именно этот перевод в конце концов стал более-менее общепринятым. В конце концов, термин пришел из типографии, где прижился задолго до веба.

  3. Иван

    На хабре читал, что лишь на IE частичная поддержка, на остальных пока закрыто. Зато flexbox поддерживается почти везде. В таком случае зачем сейчас про него писать, если с 2012 года ничего не изменилось в плане поддержки браузерами?

    1. SelenIT

      Ситуация с гридами сейчас очень похожа на ситуацию с флексбоксами в 2012-м. Высока вероятность, что Хром откроет их уже в этом году, Фокс отчаянно старается не отстать. Буквально на днях рабочая группа CSS заявила о намерениях уже этой осенью перевести гриды в статус кандидата в рекомендации, а для этого нужно как можно быстрее разобраться со всеми спорными вопросами и высказать все претензии — иначе они так и войдут в окончательный вариант. Так что сейчас самое время ознакомиться со спецификацией, «поиграть» с новым механизмом и высказать о нем всё, что хочется:)

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.