bitsofcode Icon bitsofcode

Recreating the GitGub contribution graph with CSS Grid

The best way to learn, is to learn by doing!

Ire Aderinokun:

While learning CSS Grid Layout, I’ve found that the best way to internalize all the new concepts and terminology is by working on various layouts using them. Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge.

View the working code on CodePen.

Recreating the GitGub contribution graph with CSS Grid
0:00 / 0:00