我也不确定这个到底叫什么,就是Github那种根据提交的代码次数改变方块颜色的动态墙,在这里暂时就叫活跃度砖墙。
这篇文章早就想发了,不过最近沉迷看番,一直都没写,我制作的版本在这里可以看到:https://blist.9baka.cc/user/luojia
基本思路就是往一个 `display` 为 `grid` 的容器里塞方块,让 `grid `的 `grid-auto-flow` 为 `column` ,这样方块就是纵向排列的了,然后用 `grid-template-rows: repeat(8, 1fr)` 把行数分成固定的8份,列数会自动根据格子数量增加,最后对所有砖头使用 `aspect-ratio: 1/1` 来把它们固定为正方形(当然你要别的形状也可以),样实现的墙里面的格子可以自动根据整体的宽度改变大小。
和Github以及大多数地方不同的是,我用颜色把每个月区分开了,这样看起来更直观一些。
效果如图