A Calendar in Three Lines of CSS

Here’s a little CSS Grid use case where a list of days is transformed into a calendar:

See the Pen
Simple Calendar With CSS Grid by Calendar Tricks (@calendartricks)
on CodePen.

My choice for this CSS calendar tutorial is a list. Why? Because it’s the easiest way to show the amazing capabilities of CSS grid.

With a little CSS extra you can easily make Sunday the last day of the week — a format we prefer here in Europe:

.weekday:nth-child(1) {
  grid-column: 7;
  grid-row: 1;
}

.first-day {
  grid-column-start: 2;
}

Additionally I’d further adjust the code to have the first day be set by use of a CSS Custom Property. That way the calendar would be able to display any month, without needing any CSS adjustments at all.

A Calendar in Three Lines of CSS →