This article has no byline and is on a website that is even more weirdly specific than this one is, but I appreciate the trick here. A seven-column grid makes for a calendar layout pretty quick. You can let the days (grid items) fall onto it naturally, except kick the first day over to the correct first column with grid-column-start.
Thoughts:
- I’d go with an
<ol>rather than a<ul>just because it seems like days are definitely ordered. - The days as-a-list don’t really bother me since maybe that makes semantic sense to the content of the calendar (assuming it has some)
- But… seeing the titles of the days-of-the-week as the first items in the same list feels weird. Almost like that should be a separate list or something.
- Or maybe it should all just be a
<table>since it’s sort of tabular data (it stands to reason you might want to cross-reference and look at all Thursdays or whatever).
Anyway, the placement trickery is fun.
Here’s another (similar) approach from our collection of CSS Grid starter templates.
Direct Link to Article — Permalink
The post A Calendar in Three Lines of CSS appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.