Кратко

  • Первый публичный проект Grid Layout от W3C в апреле 2011 года называл таблицы, JavaScript и точно рассчитанные плавающие элементы хрупкими средствами для раскладки веб-приложений.
  • Текст кандидатской рекомендации от декабря 2017 года описал контейнер, дорожки, линии, именованные области, гибкие размеры и автоматическое размещение; смысловая структура оставалась в HTML.

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

Первый публичный рабочий проект Grid Layout, опубликованный W3C 7 апреля 2011 года, описывал именно такие обходные пути. Веб-приложения требовали сложной раскладки; авторы использовали таблицы, JavaScript и тщательно вымеренные float-элементы. Изменение доступного пространства делало план ненадежным. Фиксированная ширина спасала один экран и оставляла пустоту или тесноту на другом.

Проект предложил делить видимое пространство на строки и столбцы, а части страницы привязывать к линиям или ячейкам сетки. Разница с таблицей данных была принципиальной. Ячейка таблицы выражает отношения внутри содержания; Grid определяет положение уже существующих частей документа. Боковая колонка может стоять рядом с материалом, не превращая сам материал в поле табличных данных.

Первый чертеж еще менял названия деталей. В примерах 2011 года встречались grid-columns и grid-rows, отличающиеся от позднейшего синтаксиса CSS. Строить современную страницу по старому наброску буквально — плохая идея. Постоянной осталась задача: объявить дорожки, границы, позиции и размеры, которые браузер рассчитывает по фактическому месту.

Кандидатская рекомендация W3C от 14 декабря 2017 года подробно описывает Grid-контейнер и его элементы. Автор задает горизонтальные и вертикальные дорожки, имена линий или областей, явно ставит важные части, а остальным позволяет размещаться автоматически. Размеры могут быть фиксированными или гибкими; единица fr делит свободное место. Вместо координат, прибитых гвоздями к одной ширине, появляется правило для разных помещений.

Автоматическое размещение помогает коллекциям карточек. Новая карточка идет на подходящее место по заданному потоку, при необходимости браузер создает неявные дорожки. Редактор выбирает схему рассадки, браузер усаживает гостей. Тринадцатая карточка перестает быть причиной ночного ремонта.

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

Свобода перемещения видимых комнат не переписывает порядок документа. CSS может показать часть в другом месте, а исходная последовательность HTML остается маршрутом для других способов чтения и навигации. Текст 2017 года различает эти вещи. Перенести вывод в верхний угол — еще не значит объяснить его раньше в статье. Мебель можно двигать, но путь по книге должен оставаться логичным.

История публикаций W3C для CSS Grid Layout Level 1 начинается проектом 2011 года и отмечает кандидатские этапы 2016 и 2017 годов. Это даты документов. Они показывают переход от временных подпорок к описанной системе контейнеров, дорожек, размеров и размещения.

Читатель редко спрашивает, сколько линий в сетке. Он замечает, если боковая панель вытесняет статью на телефоне или карточки налезают друг на друга. Grid дала издателю возможность нарисовать план, а браузеру — рассчитать его на реальном участке. Стол наконец может заняться чашкой кофе.