Loading…
8
Hit 1,400 grid cells on one page and Chrome started choking, is that normal?
I built a dashboard layout with CSS Grid for a shop inventory tool, and last Friday the cell count crossed 1,400 on a single page. Scrolling went from smooth to choppy, and drag selecting items got laggy, which I did not expect from just a layout system. I'm using grid-template-areas for the main frame and auto-fit minmax for the parts list inside it. Is there a point where too many grid items tanks performance, or did I just do something dumb with nested grids? Would love to hear if anyone has a number like this where things went bad.
1 comments
Log in to join the discussion
Log In1 Comment
seth_nguyen7d ago
Ran into the same wall around 1,200 cells on a parts grid, so 1,400 choking Chrome tracks with what I saw. What helped me was swapping the inner grid for plain flexbox rows with fixed heights, because auto-fit minmax forced the browser to remeasure every cell on each scroll frame. I also chunked the list into pages of 200 with a simple scroll container, and that alone got the smoothness back. Nested grids are fine, but stacking auto-fit inside grid-template-areas seems to be where the reflow cost adds up, in my case at least.
4