A Calendar in Three Lines of CSS
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
- 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
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.
CodePen Embed FallbackHere’s another (similar) approach from our collection of CSS Grid starter templates.
CodePen Embed FallbackDirect 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.
Comments (0) Trackbacks (0) Leave a comment Trackback
