使用CSS网格grid布局实现的仿github贡献值表格界面

GitHub Contribution Graph in CSS Grid Layout，横轴是月份，竖轴是日期的数据表格。

css, grid, template

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 5260
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
    --square-size: 15px;
    --square-gap: 5px;
    --week-width: calc(var(--square-size) + var(--square-gap));
}
.months {
    grid-area: months;
}
.days {
    grid-area: days;
}
.squares {
    grid-area: squares;
}
.graph {
    display: inline-grid;
    grid-template-areas: "empty months" "days squares";
    grid-template-columns: auto 1fr;
    grid-gap: 10px;
}
.months {
    display: grid;
    grid-template-columns: calc(var(--week-width) * 4)
    /* Jan */
    
    calc(var(--week-width) * 4)
    /* Feb */
    
    calc(var(--week-width) * 4)
    /* Mar */
    
    calc(var(--week-width) * 5)
    /* Apr */
    
    calc(var(--week-width) * 4)
    /* May */
    
    calc(var(--week-width) * 4)
    /* Jun */
    
    calc(var(--week-width) * 5)
    /* Jul */
    
    calc(var(--week-width) * 4)
    /* Aug */
    
    calc(var(--week-width) * 4)
    /* Sep */
    
    calc(var(--week-width) * 5)
    /* Oct */
    
    calc(var(--week-width) * 4)
    /* Nov */
    
    calc(var(--week-width) * 5)
    /* Dec */
    
    ;
}
.days,
.squares {
    display: grid;
    grid-gap: var(--square-gap);
    grid-template-rows: repeat(7, var(--square-size));
}
.squares {
    grid-auto-flow: column;
    grid-auto-columns: var(--square-size);
}
/* Other styling */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 12px;
}
.graph {
    padding: 20px;
    border: 1px #e1e4e8 solid;
    margin: 20px;
}
.days li:nth-child(odd) {
    visibility: hidden;
}
.squares li {
    background-color: #ebedf0;
}
.squares li[data-level="1"] {
    background-color: #c6e48b;
}
.squares li[data-level="2"] {
    background-color: #7bc96f;
}
.squares li[data-level="3"] {
    background-color: #196127;
}

HTML

GitHub Contribution Graph in CSS Grid Layout，横轴是月份，竖轴是日期的数据表格。

css, grid, template

编辑器支持Emmet

快捷键

GitHub Contribution Graph in CSS Grid Layout，横轴是月份，竖轴是日期的数据表格。

css, grid, template

使用CSS网格（grid）和外形（shape-outside）属性构建的圆形交集图

一款使用CSS grid布局实现的简约日历控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：