Новый метод размещения содержания на веб-странице появившийся относительно недавно под названием CSS Grid Layout является замечательным подтверждением известной истины, что новое ­— это хорошо забытое старое.

 

Как возвращение Одиссея

Земля, как известно, круглая. И чем дальше от нас что-то отдаляется, тем ближе оно к нам с другой стороны и, следовательно, вот-вот внезапно вернётся. Поэтому Одиссей, как бы далеко он не уплыл, обязательно возвратится к своей Пенелопе.

За 30 лет, в течение которых развивается Всемирная Паутина, многое, связанное с этой мировой Сетью, казалось бы, от нас ушло навсегда. Современный Веб это совсем не та легковесная Паутина 90-х годов. И в первую очередь от нас ушла именно легкость создания и работы веб-страниц. Нынешние  веб-сайты тяжеловесны и неповоротливы. Они обрюзгли и раскабанели от чрезмерного злоупотребления JavaScript и мультимедийными излишествами. Казалось бы, больше не осталось места сайтам с простой вёрсткой табличками, примером чего можно назвать старую версию сайта «Компьютерные Вести».

[Старый сайт «КВ»]

Но, видимо, интернет как и Земля круглый. Поэтому что именно вёрстка веб-страниц табличками внезапно, как Одиссей к Пенелопе, к нам и возвратилась. Новый метод размещения содержания на веб-странице, появившийся относительно недавно под названием CSS Grid Layout, можно смело назвать возвращением старой доброй вёрстки HTML-страниц таблицами.

 

CSS Grid Layout со второй попытки

Табличное расположение содержания на веб-странице - естественная и понятная концепция каждому человеку. Это как раскладывать вещи по полочкам в шкафу.

Естественно, вёрстка веб-страниц табличками в свое время была очень популярна. Для создания макета страницы использовались стандартные табличные HTML-теги TABLE, TR, TD и т.д.

Противоестественным же было использование табличных HTML-тегов одновременно и для табличного представления данных, и для создания шаблона веб-страницы. Поэтому еще во времена тотального господства MS Internet Explorer была предпринята попытка реализовать вёрстку таблицами посредством каскадных таблиц стилей CSS через свойство display: table. Но тогда в Microsoft не сочли эту идею интересной. А вместо неё для создания макета веб-страниц широкое распространение получила концепция «всплывающиех блоков» float div или же в просторечии «флоатов». Эта концепция является господствующей для веб-дизайна и по сей день.

Но, видимо было нужно обязательно намучиться с этими «всплывающими», как известная субстанция, «флоатами», которые постоянно всплывают не так и не там где надо, чтобы снова вернутся к идее простой и понятной таблицы. И в 2017 году Рабочая Группа Каскадных Таблиц Стилей (CSS Working Group) создала спецификацию CSS Grid Layout Level 1, которая возвращает нас снова к идее табличной вёрстки.

[CSS Grid Layout]

 

Технология и терминология

Технологически вёрстка посредством CSS Grid Layout осуществляется специальным модулем каскадных таблиц стилей браузера через свойство display: grid. Многоцелевое свойство CSS display указывает способы отображения HTML-элемента — например, блочное отображение block, строчное inline и отсутствие отображения none.

С появлением CSS Grid Layout табличные HTML-теги теперь рекомендуется применять только для форматирования табличной информации.

Также для CSS Grid Layout придумали и оригинальную собственную терминологию, призванную семантически отделить табличную вёрстку через CSS и HTML-таблицы. Вместо термина «таблица» используется понятие «сетка» — отсюда и название «CSS Grid». Колонки и строки называются «треки» или «полосы».  Пространство и границы между ячейками называются «аллеи» или «дорожки». Что, правда, не мешает авторам документации и мастер-классов по CSS Grid по-прежнему использовать термины «таблица», «колонки», «строки». Потому что так понятнее.

И так как технологическое и семантическое различие CSS Grid Layout и HTML-таблиц не отрицает их общий смысл, то в первую очередь возможности вёрстки по сетке следует изучить по отношению к вёрстке табличными тегами. Что ниже мы и сделаем.

 

Компактность и лаконизм CSS Grid Layout

Для примера, создадим с помощью CSS Grid классический народный трёхколоночный табличный шаблон, подобный шаблону старого сайта «Компьютерные Вести». Это где в первой строке макета обычно размещаются заголовочные данные — название, логотип, выходные данные и т.д. А во второй строке таблицы помещаются меню, главное содержание и баннеры с котиками.

[Классический табличный макет веб-страницы]

Теперь создадим html-файл, где в заголовке head в правилах CSS зададим специальный контейнер, состоящий всего из пары строк:

.mygrid {
  display: grid;
  grid-template-columns: 125px 468px 125px;
}

Здесь мы создаем grid-контейнер mygrid, объявив его сеткой-таблицей через свойство display: grid. А потом через свойство grid-template-columns задаём шаблон таблицы из трёх колонок шириной 125, 468 и 125 соответственно.

Дальше в теле html-страницы просто по порядку помещаем в этот контейнер в качестве его прямых потомков нужные нам элементы: логотип, название, выходные данные, меню, контент, баннер:

<div class="mygrid">
  <img src="logo.gif">
  <h1>КОМПЬЮТЕРНЫЕ ВЕСТИ</h1>
  <p>№1 2017</p>
  <menu>Газета Форум Архив</menu>
  <h2>Привет, CSS Gred Layout!</h2>
  <img src="baner.gif">
</div>

Модуль браузера CSS Grid внутри блока mygrid автоматически сформирует трёхколоночную сетку-таблицу. Автоматически будет вычислено нужное количество строк и ячеек в этих колонках, в которые модуль CSS Grid разместит все прямые потомки контейнера каждый по отдельности в отдельной ячейке слева направо, начиная с верхней левой ячейки. В результате в два щелчка пальцами получаем олдскульный табличный шаблон сайта.

[Пример шаблона на CSS Grid Layout]

Можно поиграть в панели разработчика браузера, чтобы при желании добиться полного соответствия внешнего вида примера с олдскульным сайтом «КВ» — добавив, например, синевы в меню и прочих ништяков.

Но основное, что должно броситься в глаза — это лаконичность и краткость описания шаблона веб-страницы с помощью Grid Layout. Вёрстка на CSS Grid легковеснеё даже HTML-табличек. При использовании табличных HTML-тегов нужно явно задавать с их помощью каждую колонку, каждый столбец, каждую ячейку.

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

Ещё важно отметить, что свойство display: grid можно задавать любому блочному элементу HTML-страницы — <body>, <header>, <footer> и т.п. И потому при создании шаблона страницы целиком или её части можно обойтись даже без блоков <div> или свести их использование к разумным пределам. Потому что «многоэтажные» вложенные div’ы — это один из кошмаров современного веб-дизайна.

Таким образом, подводя итог первой части обзора CSS Grid Layout отметим, что в первую очередь новая технология возвращает Вебу былую лёгкость. И для создания макетов веб-страниц снова достаточно простого блокнота.

Во второй части мы рассмотрим функциональные возможности CSS Grid Layout. Это явное форматирование сетки, нотация, фракции, объединение ячеек, z-index, адаптивная вёрстка.