Команда JavaScript for Devs подготовила перевод статьи о CSS Grid Lanes — новом подходе к masonry-раскладкам, который наконец-то становится нативной частью CSS. Grid Lanes используют всю мощь CSS Grid, работают без JavaScript, учитывают доступность и дают дизайнерам и разработчикам гибкость, о которой раньше можно было только мечтать. Разбираемся, как это работает и почему это важный шаг вперёд для веба.

Он уже здесь — будущее «каменных» (masonry) раскладок в вебе. После фундамента, заложенного Mozilla, многолетней работы команды WebKit в Apple и множества раундов обсуждений в CSS Working Group с участием всех браузеров, наконец стало понятно, как это будет работать.

Представляем CSS Grid Lanes.

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

Попробуйте уже сегодня в Safari Technology Preview 234.

Как работают Grid Lanes

Разберёмся по шагам, как именно создать этот классический макет.

Сначала — HTML.

<main class="container">
  <figure><img src="photo-1.jpg"></figure>
  <figure><img src="photo-2.jpg"></figure>
  <figure><img src="photo-3.jpg"></figure>
  <!-- etc -->
</main>

Начнём с применения display: grid-lanes к элементу main, чтобы создать grid-контейнер, готовый к построению такого типа раскладки. Затем с помощью grid-template-columns мы создаём «полосы» (lanes), используя всю мощь CSS Grid.

В данном случае мы используем repeat(auto-fill, minmax(250px, 1fr)), чтобы создать гибкие колонки шириной не менее 250 пикселей. Браузер сам решит, сколько колонок нужно, заполняя всё доступное пространство.

Далее gap: 16px задаёт отступы в 16 пикселей между полосами, а также 16-пиксельные промежутки между элементами внутри полос.

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

Вот и всё. Всего три строки CSS — без единого media query или container query — и у нас есть гибкая раскладка, которая корректно работает на экранах любого размера.

Представьте это как шоссе с плотным потоком автомобилей.

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

Такая раскладка позволяет пользователям переходить по вкладке (tab) поперёк полос ко всему контенту, который сейчас виден на экране (а не прокручиваться вниз по первой колонке далеко за пределы экрана, затем возвращаться наверх второй колонки и так далее). Кроме того, она даёт возможность создавать сайты, которые подгружают новый контент по мере прокрутки — бесконечно — без необходимости использовать JavaScript для управления раскладкой.

Сила Grid

Переменная ширина полос

Поскольку Grid Lanes использует всю мощь CSS Grid и задаёт полосы с помощью grid-template-*, становится легко создавать разнообразные и выразительные варианты дизайна.

Например, можно сделать гибкую раскладку с чередующимися узкими и широкими колонками — при этом и первая, и последняя колонки всегда остаются узкими, даже когда количество колонок меняется в зависимости от ширины вьюпорта. Это достигается с помощью
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr).

Синтаксис grid-template-* открывает целый мир возможностей.

Растягивание элементов

Поскольку в нашем распоряжении вся мощь Grid-раскладки, мы, разумеется, можем растягивать элементы на несколько полос.

main {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
  gap: 2lh;
}
article { 
  grid-column: span 1; 
}
@media (1250px < width) {
  article:nth-child(1) { 
    grid-column: span 4;             
  }
  article:nth-child(2), article:nth-child(3), article:nth-child(4), article:nth-child(5), article:nth-child(6), article:nth-child(7), article:nth-child(8) { 
    grid-column: span 2; 
  }
}

Все тизеры статей изначально настроены так, чтобы занимать одну колонку. Затем первому элементу явно задаётся растягивание на четыре колонки, а со второго по восьмой — на две. В результате получается гораздо более выразительный и динамичный графический дизайн по сравнению с типичной симметричной раскладкой, где всё одной ширины и одной высоты, которая доминировала в последние десять лет.

Размещение элементов

При использовании Grid Lanes мы также можем явно задавать расположение элементов. В этом примере шапка сайта всегда размещается в последней колонке — независимо от того, сколько колонок существует.

main {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
}
header {
  grid-column: -3 / -1;
}

Изменение направления

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

Браузер автоматически создаёт водопадную раскладку, когда вы задаёте колонки с помощью grid-template-columns, например так:

.container {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

Если же вам нужна «кирпичная» раскладка в другом направлении, достаточно определить строки через grid-template-rows:

.container {
  display: grid-lanes;
  grid-template-rows: 1fr 1fr 1fr;
}

Это работает автоматически благодаря новому значению по умолчанию для grid-auto-flow — normal. Оно определяет, создавать ли колонки или строки, исходя из того, задали вы полосы через grid-template-columns или grid-template-rows.

CSS Working Group всё ещё обсуждает, какое свойство будет явно управлять направлением потока и каким будет его синтаксис. Сейчас ведётся дискуссия о том, стоит ли переиспользовать grid-auto-flow или ввести новые свойства вроде grid-lanes-direction. Если вам интересно ознакомиться с рассматриваемыми вариантами или поделиться своим мнением, посмотрите это обсуждение.

Однако, поскольку normal в любом случае будет начальным значением, вам не нужно ждать этого решения, чтобы изучать Grid Lanes. Если вы определяете только одно направление — grid-template-rows или grid-template-columns — всё просто будет работать™. (Если вдруг нет, проверьте, не задано ли у grid-auto-flow конфликтующее значение. При необходимости его можно сбросить.)

Чувствительность размещения

«Tolerance» — это новое понятие, введённое специально для Grid Lanes. Оно позволяет настраивать, насколько придирчивым будет алгоритм раскладки при выборе места для очередного элемента.

Посмотрите на следующий рисунок. Обратите внимание, что машина 4 чуть-чуть короче машины 1. Когда значение «tolerance» равно нулю, машина 6 попадает в крайнюю правую полосу, а машина 7 — в левую. Машина 6 оказывается за машиной 4 справа, потому что так она оказывается буквально на чуть-чуть «дальше по дороге» (то есть ближе к верхней границе grid-контейнера). Затем машина 7 занимает следующее место, ближайшее к верху, и оказывается за машиной 1 слева. Каков итог? Первая горизонтальная группа контента упорядочена как 1, 2, 3, 4, а следующая — как 7, 5, 6.

Но разница в длине между машиной 1 и машиной 4 ничтожно мала. Машина 6 на самом деле не оказывается сколько-нибудь заметно ближе к верху страницы. А ситуация, когда элемент 6 находится справа, а элемент 7 — слева, скорее всего будет неожиданной — особенно для пользователей, которые перемещаются по странице с помощью табуляции, или когда порядок контента как-то явно обозначен.

На практике такие крошечные различия в размере не имеют значения. Вместо этого браузеру стоит считать элементы вроде машины 1 и машины 4 равными. Именно поэтому значение по умолчанию для item-tolerance — 1em: это означает, что при определении места для следующего элемента будут учитываться только различия в длине контента больше чем на 1 em.

Если вы хотите, чтобы элементы «перетасовывались» в раскладке реже, можно задать большее значение item-tolerance. На следующей схеме tolerance установлен равным половине длины машины — в результате машины в основном выстраиваются слева направо и переходят в другую полосу только для того, чтобы обойти особенно длинный лимузин. Теперь горизонтальные группы контента выглядят как 1, 2, 3, 4 и 5, 6, 7.

Думайте о tolerance как о том, насколько спокойными вы хотите видеть водителей. Будут ли они перестраиваться ради нескольких сантиметров преимущества? Или станут менять полосу только тогда, когда в соседней действительно много свободного места? То количество пространства, которое для них «имеет значение», и задаётся через item-tolerance.

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

В настоящее время это свойство называется item-tolerance — и в спецификации, и в Safari Technology Preview 234. Однако остаётся вероятность, что название изменится, например на что-то вроде flow-tolerance или pack-tolerance. Если у вас есть предпочтения или идеи для более удачного имени, вы можете высказаться в обсуждении. Перед использованием этого свойства на продакшен-сайтах стоит следить за обновлениями и дождаться финального названия.

Попробуйте сами

Попробуйте Grid Lanes в Safari Technology Preview 234! Все демо-примеры на webkit.org/demos/grid3 уже обновлены и используют новый синтаксис, включая другие сценарии применения Grid Lanes. И это далеко не только про изображения. Например, футер с мегаменю, набитый ссылками, внезапно становится очень простым в раскладке.

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  column-gap: 4lh;
}

Что дальше?

CSS Working Group предстоит принять ещё несколько финальных решений. Но в целом возможность, описанная в этой статье, уже готова к использованию. Самое время попробовать её на практике. И наконец-то можно без опаски заучить базовый синтаксис!

Нам будет очень интересно увидеть ваши демо-примеры. Покажите, какие новые сценарии использования вы сможете придумать. И обязательно сообщайте о найденных багах или возможных улучшениях. Напишите Джен Симмонс в Bluesky или Mastodon — присылайте ссылки, комментарии и идеи.

Наша команда работает над этим с середины 2022 года, реализуя поддержку в WebKit и параллельно разрабатывая веб-стандарт. Нам не терпится увидеть, что вы с этим сделаете.

Русскоязычное JavaScript сообщество

Друзья! Эту статью перевела команда «JavaScript for Devs» — сообщества, где мы делимся практическими кейсами, инструментами для разработчиков и свежими новостями из мира Frontend. Подписывайтесь, чтобы быть в курсе и ничего не упустить!