blog/css-grid-bar-charts

[utterances-bot]

Creating dynamic bar charts with CSS grid - Josh Collinsworth blog

How to use CSS grid to make a responsive, adaptable bar chart with no math or external library required!

https://joshcollinsworth.com/blog/css-grid-bar-charts

[chezchez]

Totally awesome Josh! Thanks for sharing. I will definitely use it!

[hey68you]

Really cool - I was also thinking about this good use case!

side point - maybe you know why as in your screenshot: https://joshcollinsworth.com/images/post_images/grid-auto-columns.png

when you set grid-auto-colums: 1fr

then the grid columns indicators on top skip #2 ???

[rachelbt]

Great article and use of grid. I think you can upgrade your code by using css-variables in your inline-style. in the css: grid-column: var(--col-span); inside the HTML: <li style="--col-span: 9"> https://codepen.io/rachelbt/pen/BaYObgr

[rachelbt]

sorry - for the css: grid-column: span var(--col-span);