CSS subgrid for great good - and a light virtualised scroller!

CSS grid has been a great addition to the toolbox of front-end developers but it has also been very restricted in the kind of DOM structures it accepts: all grid cells must be direct children of the grid element itself, and any kind of substructure is impossible.

That has changed since CSS subgrids became part of the browser baseline in 2023. Subgrids make it possible for a grid to contain non-cell elements that inherit the column or row structure of the main grid, enabling many previously impossible things.

Here's one thing we can do with it: we can build a table where a CSS grid defines the full size of the table's contents but a CSS subgrid is used to make the contents scrollable, and then a second smaller subgrid is used to render the table cells visible in the viewport. With a little bit of magic and mathematics borrowed from ring buffers, we can make the DOM structure stay entirely static and get the browser to handle element positioning for us using a combination of CSS grid styling, transforms, and the order property. The end result is an excellent light-weight table performing full re-renders at well under 10 milliseconds.