<divelopers>: “Алгоритмическая вёрстка Рассуждая на тему того, что идеальных контроль…”

Алгоритмическая вёрстка

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

Суть алгоритмической вёрстки в том, чтобы вместо медиа-запросов с контрольными точками указывать правила (алгоритмы), по которым браузер сам принимает решение о размещении элементов в зависимости от условий.

Хейдон Пикеринг в своём видео Making Future Interfaces: Algorithmic Layouts демонстрирует суть на примере макета с боковой колонкой. Позже идея получила развитие в книге Every Layout за авторством Хейдона и Энди Бэлла.

Предположим, что нужно создать сетку с карточками товаров. На широких экранах карточки должны отображаться в несколько колонок. Чем у́же экран, тем меньше колонок. Классический подход — использовать grid и медиа-запросы:

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (width > 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width > 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width > 1400px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Получается многословно, а значения контрольных точек жёстко заданы. Этот код можно сделать компактнее, используя вложенность, функцию if() и пользовательские свойства. Но проверка контрольных точек всё равно останется:

.product-grid {
  --columns: if(
    media(width > 1400px): 4;
    media(width > 900px): 3;
    media(width > 600px): 2;
  );
  display: grid;
  grid-template-columns: repeat(var(--columns, 1), 1fr);
  gap: 30px;
}

Вместо изменения количества колонок в контрольных точках можно задать алгоритм построения сетки с автоматическими колонками из элементов, ширина которых ограничена минимальным значением:

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 30px;
}

Браузер получает алгоритм: «автоматически создавай колонку, если в неё помещается элемент шириной от 200px до одной доли доступного пространства, остальные элементы переноси на новую строку».

Отступы, поля, размеры шрифта, закругления тоже можно описать в виде алгоритма c использованием функций calc(), min(), max(), clamp(). На этом, в частности, основана «гибкая типографика» (fluid typography):

.title {
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
}

Алгоритм для браузера: «рассчитай размер шрифта на основе текущей ширины области просмотра и размера шрифта корневого элемента, но не менее 2rem и не более 3rem». Размер шрифта будет меняться в зависимости от ширины экрана.

Больше примеров алгоритмической вёрстки:

- 1-Line Layouts
- SmolCSS
- Container Query Solutions with CSS Grid and Flexbox
- Modern Fluid Typography Using CSS Clamp
- Utopia Fluid Responsive Design
- Every Layout

#css