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);