In this episode, we dive into setting up a grid layout for our scroller component. We start by discussing why traditional CSS Grid or Flexbox approaches don't quite work here—because virtual scrollers generally use absolutely positioned elements with transforms in order to optimize performance and only render what’s visible.
To make our grid, we pass options into the scroller like the number of grid items (columns) and the item size. We look at how to make the grid layout dynamic so it can span edge-to-edge of our container. We play with some hard-coded values at first, but then make sizing more dynamic by dividing the container width by the number of columns to ensure our checkboxes are spaced evenly.
Once that's working, we swap out rendering simple IDs in the grid for actual checkbox inputs, and add in a little demo to show off how checked state can be managed and updated.
At the end, we hit an important limitation—these virtual scroller libraries have a hard cap on how many DOM elements you can render at once (usually around 1000), even if you technically have a million items. To avoid crashing the browser, we set a max-height on our scroller container so when users zoom out or use a huge monitor, we don’t accidentally try to paint too many checkboxes at once.
By the end, you’ll see how to set up a performant, dynamic, grid-like virtual scroller and how to sidestep some common gotchas!