We saw the article on CSS Tricks about Building a conference schedule with CSS grid and this prompted us to share our approach, as we recently faced similar challenge.
We’ve been asked to create an event schedule for a 3 days event. This event has the particularity of having 7 stages. Therefore we took different approach how to layout the events across the 3 days schedule. In a small/medium conference you might have up to 4 or 5 stages which is likely they can be fitted on a column/row layout for the respective stage/time slot. In our case not all stages have events all the time, so every event is based on time and is associated to a stage through their colour and description as per the example below:
Our first thought was to build the schedule using HTML
<table>, but we actually started prototyping the planner using
divs and CSS
display: grid. The reason we started with
grid was because the markup would be easier to create and maintain events using a CMS, but soon we realised it was relying heavily on CSS to build the layout.
In the end we found that using the HTML
<table> would be the right element to represent the data we had. In fact this is tabular data (information presented in a two-dimensional table) so why not use it? This also means it would be full supported and accessible by every browser, no need to create fallbacks for
Below you can find both prototypes using CSS grid and table - we haven’t styled for small device, please bear with us.
Example using CSS grid
Example using HTML <table>
Let me know if you found this article useful, if it could be improved or if you have any other suggestions.