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:

<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 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.

.calendars {
    display: flex;
    flex-wrap: wrap;

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

.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!

.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:

.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.

Share this post on…

One thought on “Responsive Yearly Calendar with Flexbox”

  1. @Edent I enjoy seeing how the sausage is made! I also may have to steal some of the CSS tricks, I've been wanting to make a responsive photo album view for my website.


What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">