Создание многоступенчатого расписания с использованием современного CSS: grid, subgrid, round() и mod()

Эта статья подробно описывает процесс создания сложного, многоступенчатого расписания событий исключительно с помощью современного CSS. Основная цель — разработать адаптивный компонент, который подстраивается под высоту самого высокого сеанса, сохраняет выравнивание по всей шкале времени и поддерживает несколько сцен. Разметка HTML включает общую обертку для расписания, контейнеры для каждой сцены и упорядоченные списки для сеансов. Время начала и окончания для каждого сеанса задается через встроенные пользовательские свойства CSS (--start: 900; --end: 945;), использующие 24-часовой формат.

CSS начинается с определения переменных, таких как цвета, высота единицы времени (5-минутные интервалы), количество сцен, ширина сцены и общий диапазон времени события. Эти переменные используются для динамического построения сетки, где .timetable--body задает столбцы и строки. Каждая сцена и список сеансов внутри нее используют subgrid и grid-row: 1 / -1; для наследования структуры сетки и автоматической адаптации высоты.

Наиболее сложная часть — размещение сеансов на сетке — реализуется с помощью CSS-функций round() и mod(). Они преобразуют числовое представление времени (например, 1045) в соответствующие номера строк сетки, учитывая смещение начала расписания.

.session {
  --timetable-offset: calc(var(--start-time) * 60);
  --start-hours-to-minutes: calc(round(down, var(--start) / 100, 1) * 60);
  --start-minutes: mod(var(--start), 100);
  grid-row-start: calc(
    (var(--start-hours-to-minutes) + var(--start-minutes) - var(--timetable-offset)) / 5 + 1
  );
}

Для улучшения читаемости добавляются индикаторы часов, размещенные в отдельном столбце, которые становятся "липкими" (position: sticky) при горизонтальной прокрутке. Далее применяется прокрутка с привязкой (scroll-snap), чтобы сцены аккуратно выравнивались рядом с индикаторами часов.

Одной из проблем было создание "липких" заголовков сцен, которые бы следовали за вертикальной прокруткой страницы, но при этом реагировали на горизонтальную прокрутку самого расписания. Решение было найдено с использованием управляемых прокруткой анимаций. Это достигается путем создания "фальшивых" заголовков сцен вне прокручиваемого тела расписания, которые становятся "липкими" к верхней части окна браузера. Затем, используя scroll-timeline-name и timeline-scope, эти заголовки анимируются для горизонтального перемещения в соответствии с прокруткой тела расписания.

Хотя функции round() и mod() являются современными, для старых браузеров предусмотрен JavaScript-фоллбэк, обеспечивающий кроссбраузерность. Результатом является полнофункциональное, адаптивное и визуально привлекательное расписание, созданное с использованием мощных возможностей современного CSS.

Оригинал статьи: Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod()