Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod(). - 9elements

"Timetables are one of those components that look simple but contain a surprising amount of layout logic. For a project in 2026 I needed a version that supports multiple stages, adapts to the tallest session, and stays aligned across the entire timeline - all built in CSS. Since the post is fairly long, here's a brief overview of what's coming: Building the grid and placing the sessions - using subgrid, mod(), and round() to map times to grid lines."

"The .timetable--body element isn't strictly necessary yet, but will become useful later. Each stage gets its own container, marked with a headline and an ordered list holding all sessions for that stage. Note: You may have noticed the inline styles that define which column each stage belongs to. This will be used later when placing the stages on the grid."

Timetables require detailed layout logic to support multiple stages, adapt to the tallest session, and maintain alignment using only CSS. Use clear, readable markup with a wrapper for the timetable and a separate body wrapper. Give each stage a container with a headline and an ordered list of sessions. Assign start and end times via CSS custom properties on <li> elements using 24-hour values. Place stages into grid columns with inline styles for clarity. Build the grid using subgrid and map times to grid lines with mod() and round(). Add hour indicators, manage horizontal overflow, and implement sticky stage headlines driven by scroll animations.

Read at 9elements