Build a multi-stage timetable for a conference β€” fully in modern CSS.
Each hour grows automatically to fit all sessions.

🍾 heavy use of subgrid.
🍾 round() and mod() to place sessions accurately
🍾 scroll-driven animations for sticky stage headings

If you want the full breakdown of how this is done, here’s the write-up πŸ‘‡

https://9elements.com/blog/building-a-multi-stage-timetable-with-modern-css-using-grid-subgrid-round-and-mod/

@nilsbinder F09/90F πŸ‘Œ
@pixelambacht 😜
Still love these colors.
Though I hate that nowadays they seem to be the only colors anyone uses on the web.
@nilsbinder Isn't that a good thing though?
@nilsbinder appreciate the write up. Trying to figure out having sessions spanning the stages. Lunch as the example. Same time over the three.
@midknight I guess I’d add a breaks container right before the stages. And it should span all stages slots. But then you’d need to pull the breaks out of the clear markup so maybe give it aria hidden and leave them in the stages but hide them there visually. I’ll see if I can fix up a demo.

@midknight Here's a little demo for you. Is this what you had in mind?

https://codepen.io/enbee81/pen/xbVrePV?editors=1100

Timetable | 04 - Full-width-breaks

...

@nilsbinder very much appreciated! Ok that makes sense.