A Grid Solution for the Responsive Tables Problem

I rebuilt the pattern using CSS Grid Layout, you can take a look at the CodePen below however you will need to enable CSS Grid Layout in your browser.

However this pattern seems not to be ideal from an accessibility standpoint. Marked up as a list, the day names are disassociated from the days themselves. I’ve always felt a table to be a more semantic representation of a calendar – but tables are hard to make responsive. It is not surprising that people choose another type of mark-up when needing to add a calendar to an application.

As an experiment I turned the list markup back into a table, and then used CSS Grid on the various table elements so the browser was now displaying the table using display: grid and associated properties rather than display: table.

A few points:

1. I have had to declare grids “all the way down”, due to lack of subgrid support meaning I could not just declare a grid on table and use it through all of the children. Only direct children become grid items of the container with display: grid (just like flex items and display: flex)
2. I think display: contents would actually work in this scenario, if it were implemented in Chrome.
3. Anonymous elements (such as the tbody) not explicitly added to my mark-up were becoming child elements of the grid container so needed to be accounted for.
4. If this wasn’t an experiment it could be further simplified by using the regular table display when at full width, and then gridifying it only for the narrower viewport versions.

Grid is a good candidate for doing this kind of thing, as it is conceptually “table like”. It’s a pretty easy mapping from the logical table structure in HTML to Grid Layout, it would be excellent if this enabled far better responsive table patterns in the future.

The problem of multiple day events

Something that is a difficult issue in calendaring is dealing with multiple day events. We have this come up in Perch from time to time. People would like to be able to use the Calendar App to display multiple day events but other than simply adding the event to each day, there isn’t a great way to do that. A way that makes sense semantically and is also possible to template.

Building this example makes me wonder if Grid could be used to layout out a highlighting box around multiple days to show the span of an event in a better way, however I still don’t have a good answer for how that should be marked up. If you have a suggestion, pop it in the comments.