CSS Grid Layout (или просто «Grid») это основанная на сетках система для построения
двухмерных лэйаутов, задача которой никак не меньше, чем полностью изменить способ
создания основанных на сетках интерфейсов. CSS всегда использовался для создания
лэйаутов на веб-страницах, но никогда не позволял делать это достаточно хорошо.
Сначала мы использовали таблицы, затем float, позиционирование и inline-block,
но в принципе всё это – хаки и они не обладали многими необходимыми функциями
(вертикальное центрирование, например). Flexbox помог, но он был разработан для
создания небольших и одномерных, а не сложных и двумерных лэйаутов (На самом деле
Flexbox и Grid отлично подходят для совместного использования). Grid — первый
css-модуль, который создан специально, что бы решать проблемы лэйаута, которые
мы решаем с помощью разнообразных хаков с тех пор, когда начали делать сайты.
Есть две основных причины, которые подтолкнули меня к созданию этого руководства.
Первая это охуебенная книга Рейчел Эндрю (Rachel Andrew) «Приготовьтесь к CSS Grid Layout»
Это тщательное, понятное введение в Grid и основа этой статьи. Я очень рекомендую её
купить и прочесть. Вторым источником вдохновения стала статья «Полное руководство по Flexbox»
Криса Койера (Chris Coyier), которая стала для меня настольным справочником по всему,
что касается flexbox. Она помогла массе людей, о чем свидетельствует тот факт, что она
в топе поисковой выборки Google по запросу flexbox. Вы сможете найти массу схожего между
его статьей и моей, потому что почему бы не наследовать лучших?
Цель этого руководства раскрыть основные идеи Grid в на основе наиболее свежей версии спецификации. Так что я не буду рассматривать устаревший синтаксис IE и буду прилагать все усилия для обновления этого руководства по мере внесения изменений в спецификацию.
Начать использовать Grid просто. Определите контейнер лаяута задав ему display: grid,
задайте размеры строки и столбца с помощью свойств grid-template-rows и grid-template-columns,
Позиционируйте в нем дочерние элементы используя grid-column и grid-row. Как и во flexbox
исходный порядок элементов не имеет значения. CSS позволяет разместить их в любом порядке, что
позволяет запросто его изменять с помощью медиа-выражений. Представьте как вы задаете лаяут
страницы и затем полностью его изменяете с помощью пары строк CSS что бы он лучше подходил
для другого размера экрана. Grid это один из наиболее мощных модулей, которые были когда-либо
созданы.
Важно понимать, что Grid ещё не готов для продакшена. На данный момент это черновик, по умолчанию он не поддерживается ни в одном браузере. Есть поддержка в Internet Explorer 10 и 11, но они поддерживают старую версию спецификации с устаревшим синтаксисом. Что бы поэкспериментировать с Grid лучше всего использовать Chrome, Opera или Firefox, предварительно установив специальные флаги. В Chrome откройте chrome://flags и разрешите «experimental web platform features». Тоже самое в Opera (opera://flags). В Firefox установите layout.css.grid.enabled.
Таблица поддержки браузерами, которую я постараюсь поддерживать в актуальном состоянии:
Все разработчики разработчики браузеров, кроме Microsoft, ожидают того, как будет использоваться Grid в веб и того момента, когда спецификация не будет полностью готова. Это хорошо, это значит, что нам не придется изучать множество версий синтаксиса.
Выход Grid в продакшен это только вопрос времени. Но время изучать его уже настало.