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.