Chrome limits the grid to 1000 rows?

[bludev]

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.

[Jiang-Xuan]

Have a look at
https://chromium.googlesource.com/chromium/src/+/8cb09b29e1185c26eab27fdd245df429e8af8c51

[mrwweb]

Confirmed. Here's another codepen demo: https://codepen.io/mrwweb/pen/jZvNpr?editors=1100

[oscarotero]

I have Chrome 63 and see the first 2000 rows but the rest seems overlapped:

[mrwweb]

@oscarotero That's 1000 rows because it's 2000 items in TWO columns.

Obvious math solely for clarity: 2000 ÷ 2 = 1000

[oscarotero]

Ah, got it! 😄

[kizu]

BTW, there was a decision made at the latest CSSWG meeting to put a recommendation with a minimum of 10k tracks into a spec: w3c/csswg-drafts#2261 (comment)

[mrwweb]

Not too surprising since it's a webkit browser, but this is also visible in Opera 50 and 51.

[mesqueeb]

I have the same bug in Google Chrome. How can I have a grid with more than 1000 rows? I need at least 1440. : )

[ThaDaVos]

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

[mesqueeb]

Guess we can't use grid to recreate an excel sheet huh : D

[ThaDaVos]

Sadly not - was working on a drag and drop grid - currently looking into WebGL - it may offer a solution

[klimashkin]

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/

[stonecrafter]

I just updated to v93.0.4577.63 and still seeing this problem...

[textyre]

Same theme

[bludev]

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)

[mesqueeb]

@bludev what's the gridNG flag?

[mikkorantalainen]

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.

[bludev]

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).