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.

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.