This is an attempt to demonstrate how CSS Grid Layout makes it possible to make a calendar with only three lines of CSS.
While many would argue that a calendar should be built semantically using a table, there are others who think a list would also be appropriate. And the <a href="https://www.iandevlin.com/blog/2015/07/html5/building-a-semantic-calendar-in-html5/"><time></a> element could also be a potential solution for semantic calendars.
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. Yes, making more complex calendars has been getting easier since flexbox, but CSS grid simplifies things even more.
The first line is easy, it tells the browser to display the list as a grid. The second line, well, the second property, <b>grid-template-columns</b>, is used to define the size of each column. A week has seven days, we have seven columns. I could have easily written:
But that’s not only repetitive, it’s also prone to typos, so we can use <b>repeat()</b> because all our columns have the same width. The <b>1fr</b> you see there is a new CSS unit of flexible length, you can read more about it here.
Finally, because most months don’t start on Sunday, we can use the <b>grid-column-start</b> property to specify which day is the first of the month.
There you have it: three lines of CSS to make a calendar. I encourage you to visit MDN and read more about CSS grid and all the things it can do.