Recreating the GitHub Contribution Graph with CSS Grid Layout

Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge.

As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using almost any other method. In this case, the layout-related part of my CSS ended up being less than 30 lines, with only 15 declarations!

grid-auto-flow: column;, that’s the key to this one. What shines the most though is the use of CSS Variables.

Recreating the GitHub Contribution Graph with CSS Grid Layout →

Related: Frappé Charts easily lets you create GitHub Contribution Graphs.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.