New CSS features can sometimes make it easier and more efficient to code designs we already knew how to create. This efficiency could stem from reduced code or hacks, or improved readability due to the new features. In that spirit, let’s revamp what’s under the hood of a bar chart. 32% We begin by laying out a grid. .chart { display: grid; grid-template-rows: repeat(100, 1fr); /* etc. */ } The chart metric is based on percentage, as in “some number *out of 100*.” Let’s say we’re working with a grid containing 100 rows. That ought to stress test it, right? Next, we add the bars to the grid with the grid-column and grid-row properties: .chart-bar { grid-column: sibling-index(); grid-row: span attr(data-value number); /* etc. */ } Right off the bat, I want to note a couple of things. First is that sibling-index() function. It’s brand new and has incomplete browser support as of this writing (come on, Firefox!), though it’s currently supported in the latest Chrome and Safari (but not on iOS apparently).…