html - 垂直列の div を揃える

Question

Github コントリビューション グラフを再現してみます (次のスクリーンショットを参照)。

各スクエアには.dayクラスがあります。コンテナに名前を付けました.gh-contributions。

問題は、この方法で div を整列できないことです。

 1 8
 2 9
 3 10
 4 11
 5 12
 6 ...
 7

に追加float:leftすると、次のよう.dayになります。

 1 2 3 4 5 6 ...

それを削除すると、次のようになります。

 1
 2
 4
 5
 6
 7
 8
 9
 10
 ...

私のCSSコードは次のとおりです。

.day {
    width: 10px;
    height: 10px;
    background: white;
    margin: 1px;
}

.gh-contributions {
    width: 775px;
    padding: 10px;
    height: 120px;
    background: lightblue;
    position: absolute;
    top: 15%;
    left: 10%;
}
.active {
    background: red !important;
}

JSFIDDLEを参照してください。

どうすれば修正できますか？