I've written about bar charts in HTML & CSS Grid and how they make responsive design, internationalization and accessibility easier than SVG & JS layouting.
https://9elements.com/blog/responsive-bar-charts-in-html-and-css/
Collaboration with @nilsbinder and @sphinxc0re.
Here's the link to the CodePen if you'd like to have a look at the final code:
@molily Removed .tick-line elements and moved the line as a pseudo element into .tick-value which is now a flex container that spans to the given --grid-row-count.
There also is no longer a need to define grid-template-rows. Giving the --grid-row-count is also optional, it defaults to spanning to a value of 100.
@molily Additionally this fork removes need for setting the inset-inline-start value for each .tick-value by using a flex container on .ticks:
https://codepen.io/Merri/pen/PorYvvE
(Edit: also switched to `visibility: hidden;` over `opacity: 0; user-select: none;`)
molily
Vesa Piittinen