{"id":257047,"date":"2017-08-02T05:57:25","date_gmt":"2017-08-02T12:57:25","guid":{"rendered":"http:\/\/css-tricks.com\/?p=257047"},"modified":"2022-07-12T06:27:25","modified_gmt":"2022-07-12T13:27:25","slug":"making-a-bar-chart-with-css-grid","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/making-a-bar-chart-with-css-grid\/","title":{"rendered":"Making A Bar Chart with CSS Grid"},"content":{"rendered":"\n

Editors note<\/strong>: this post is just an experiment to play with new CSS properties and so the code below shouldn\u2019t be used without serious improvements to accessibility.<\/p>\n\n\n\n

I have a peculiar obsession with charts<\/a> and for some reason, I want to figure out all the ways to make them with CSS. I guess that’s for two reasons. First, I think it’s interesting that there are a million different ways to style charts and data on the web. Second, it’s great for learning about new and unfamiliar technologies. In this case: CSS Grid!<\/p>\n\n\n\n

So this chart obsession of mine got me thinking: how would you go about making a plain ol’ responsive bar chart with CSS Grid, like this:<\/p>\n\n\n\n\n\n\n\n