Responsive Yearly Calendar with Flexbox

This blog has a calendar showing my yearly archives. It was in a table layout - which made sense when I first designed it - but had a few spacing niggles and was hard to make responsive.

Now, it behaves like this:

The code is relatively straightforward. The HTML for the calendar looks like this:

 HTML<div class="calendars">

    <div class="calendar">

        <div class="calendar-year">2018</div>

        <div class="calendar-month">January</div>

        <div class="calendar-month">February</div>

        <div class="calendar-month">March</div>

        <div class="calendar-month">April</div>

        <div class="calendar-month">May<br></div>

        <div class="calendar-month">June</div>

        <div class="calendar-month">July</div>

        <div class="calendar-month">August</div>

        <div class="calendar-month">September</div>

        <div class="calendar-month">October</div>

        <div class="calendar-month">November</div>

        <div class="calendar-month">December</div>

    </div>



    <div class="calendar">

        <div class="calendar-year">2017</div>

        <div class="calendar-month">January</div>

        <div class="calendar-month">February</div>

                ...

Repeat as many times as needed.

The CSS is slightly more tricky, but mercifully short:

The wrapper which holds all the calendars uses flex-wrap. This means there's no need to set explicit breakpoints - if there's no horizontal space, the calendar will move to the next row.

 CSS.calendars {

    display: flex;

    flex-wrap: wrap;

}

Each individual calendar item is a grid with three column layout:

 CSS.calendar {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin: .5em;

}

The "Year" at the top spans the first three columns. I find the grid-column-... syntax confusing!

 CSS.calendar-year {

    grid-column-start: 1;

    grid-column-end: 4;

    text-align: center;

    outline: 1px black solid;

}

Finally, each individual month has a bit of internal padding and text formatting:

 CSS.calendar-month {

    text-align: center;

    padding: .25em;

    outline: 1px black solid;

}

I've used a basic black outline. Obviously, you can add whatever fancy CSS you like to make them look prettier.