rachelandrew
Chrome limits the grid to 1000 rows?
It seems that if there are more than 1000 rows, Chrome only displays the first 999 rows, while the following ones are not rendered correctly.
See the demo here: https://codepen.io/bludev/pen/MOpyQR
In Firefox and Edge 16, the example works properly.
Have a look at https://chromium.googlesource.com/chromium/src/+/8cb09b29e1185c26eab27fdd245df429e8af8c51
Confirmed. Here's another codepen demo: https://codepen.io/mrwweb/pen/jZvNpr?editors=1100
I have Chrome 63 and see the first 2000 rows but the rest seems overlapped:
@oscarotero That's 1000 rows because it's 2000 items in TWO columns.
Obvious math solely for clarity: 2000 ÷ 2 = 1000
BTW, there was a decision made at the latest CSSWG meeting to put a recommendation with a minimum of 10k tracks into a spec: https://github.com/w3c/csswg-drafts/issues/2261#issuecomment-367414140
Not too surprising since it's a webkit browser, but this is also visible in Opera 50 and 51.
I have the same bug in Google Chrome. How can I have a grid with more than 1000 rows? I need at least 1440. : )
I've hit the same kind of bug with Mozilla Firefox - setting grid-template-columns/rows to repeat(auto-fill, 0.1px) limits it to 1887 columns and 883 rows - kinda a bummer
Sadly not - was working on a drag and drop grid - currently looking into WebGL - it may offer a solution
Looks like it's fixed in Chrome 93+ with the rollout of the GridNG https://blogs.windows.com/msedgedev/2021/08/10/compat2021-css-grid-gridng/
Currently, it seems that the "GridNG" flag is enabled by default only from Chrome and Edge 96 (Canary). For previous versions (93+) it is necessary to manually enable it from chrome://flags (or edge://flags)
I think it's actually called LayoutNG but my Linux version of Chrome 94.x doesn't seem to have such a flag. The closest I have is chrome://flags/#enable-container-queries which refers to LayoutNG.
Sorry, my mistake! The "gridNG" flag is found only in Edge Chromium. I can't find the same flag in Chrome, which is perhaps called LayoutNG (as @mikkorantalainen said).