# GitHub Commit Graph ### Layout Variations See how this plugin adapts across different mashup views. Each view shows a single instance to demonstrate how the layout responds to available space. #### Full View 10004Contributions in last year 19Longest streak 3Current streak 27Most in a day 2.45Average per day GitHub@ryanckulp
10004 Contributions in last year
19 Longest streak
3 Current streak
27 Most in a day
2.45 Average per day
GitHub @ryanckulp
#### Half Horizontal 10004Contributions 19Longest streak 3Current streak GitHub@ryanckulp
10004 Contributions
19 Longest streak
3 Current streak
GitHub @ryanckulp
#### Half Vertical 10004Contributions in last year 19Longest streak 3Current streak GitHub@ryanckulp
10004 Contributions in last year
19 Longest streak
3 Current streak
GitHub @ryanckulp
#### Quadrant 10004Contributions 3Current streak GitHub@ryanckulp
10004 Contributions
3 Current streak
GitHub @ryanckulp
### Shared This plugin uses a shared file that contains shared CSS styles and/or JavaScript logic used across all layout variations. .trmnl #github_commit_graph { --rows: 7; --columns: 52; --gap: 3px; width:100%; height:100%; padding:0px; flex:1 1 0; justify-content:center; display:grid; grid-template-columns:repeat(var(--columns), round(down, (100% - var(--gap) * (var(--columns) - 1)) / var(--columns), 1px)); grid-template-rows:repeat(var(--rows), round(down, (100% - var(--gap) * (var(--rows) - 1)) / var(--rows), 1px)); grid-auto-flow:column; gap:var(--gap); } .trmnl #github_commit_graph .day { display:block; border-radius:4px; width:100%; height:100%; } .trmnl .view--quadrant #github_commit_graph { --gap: 1px; } .trmnl .view--half_vertical #github_commit_graph { --gap: 1px; } .trmnl .view--half_horizontal #github_commit_graph { --gap: 2px; } .trmnl .view--full #github_commit_graph { --gap: 3px; } Next [ShopifyShopifyShopify E-commerce analytics and store metrics displayed in various layouts](/framework/examples/shopify)