CODEWITHSUNDEEP
htmlcssgoogle-chromecss-grid
oldboy
oldboy

Reputation: 5954

Won't Display More Than 999 Rows in Chrome

For some reason, in Chrome, elements begin overlapping one another once 999 rows have been printed. It works fine in Firefox. The version of Chrome that I'm using is 70.0.3538.102 (Official Build) (64-bit), which was just released earlier today.

The pages are sorted alphabetically, and I don't experience this issue on any other page because the 'A' page is the only page with more than 999 rows.

enter image description here

#data {
  display: grid;
  grid-template-columns: repeat(8, max-content);
  grid-template-rows: auto;
}

<section id="data">
   ...
  <div>1000</div><div>axelle</div><div>G</div><div>92,296</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1001</div><div>axes</div><div>G</div><div>88,536</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1002</div><div>axethrowing</div><div>G</div><div>138,823</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1003</div><div>axial</div><div>G</div><div>395,943</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1004</div><div>axialracing</div><div>G</div><div>165,508</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1005</div><div>axilas</div><div>G</div><div>87,736</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1006</div><div>axiom</div><div>G</div><div>110,834</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1007</div><div>axioo</div><div>G</div><div>321,874</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div>
   ...
</section>

Is this a Chrome bug or?

Upvotes: 3

Views: 669

Answers (1)

user149341
user149341

Reputation:

The CSS Grid specification makes explicit provisions for the handling of very large grids:

Since memory is limited, UAs may clamp the possible size of the grid to be within a UA-defined limit, dropping all lines outside that limit. If a grid item is placed outside this limit, its grid area must be clamped to within this limited grid.

(https://www.w3.org/TR/css-grid-1/#overlarge-grids)

The specification goes on to give an example involving a hypothetical UA with a grid size limit of 1000, implying that this is a typical limit.

This is not an appropriate application for CSS Grid functionality. Use an HTML table -- this is exactly the sort of thing they're made for.

Upvotes: 1

Related Questions