CSS Grid Layout in Chrome Seems Not to Work Properly with More Than 1000 Rows

CSS Grid Layout in Chrome seems not to work properly with more than 1000 rows

Ok, the 1000 rows (and also 1000 columns) limit has been intentionally introduced into the Chrome engine for reasons of stability and RAM consumption. A new version of the Grid functionality seems to be in progress and should solve the problem.

Sources:

• https://bugs.chromium.org/p/chromium/issues/detail?id=688640
• https://github.com/w3c/csswg-drafts/issues/1009

UPD: from Chrome version 96.0.4642 items amount extended to 100,000 rows/columns

Won't Display More Than 999 Rows in Chrome

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.

CSS Grid: grid-row not working in Chrome browser

Since all your span are a multiplier of 5 you can try to use lower numbers to avoid this bug and increase the grid-auto-rows

.container {  width: 1080px;  margin: 0 auto;}
.grid-container {  display: grid;  grid-auto-rows: 5px;  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));}
.grid-item {  display: flex;  align-items: center;  justify-content: center;  border: 1px solid;  font-size: 50px;  margin: 5px;}
.grid-row-200 {  grid-row: span 40;}
.grid-row-225 {  grid-row: span 45;}
.grid-row-250 {  grid-row: span 50;}
.grid-row-275 {  grid-row: span 55;}
.grid-row-300 {  grid-row: span 60;}
.grid-row-350 {  grid-row: span 70;}

<div class="container">  <div class="grid-container">    <div class="grid-item grid-row-200">200px</div>    <div class="grid-item grid-row-300">300px</div>    <div class="grid-item grid-row-225">225px</div>    <div class="grid-item grid-row-250">250px</div>    <div class="grid-item grid-row-275">275px</div>    <div class="grid-item grid-row-350">350px</div>    <div class="grid-item grid-row-300">300px</div>    <div class="grid-item grid-row-250">250px</div>    <div class="grid-item grid-row-350">350px</div>    <div class="grid-item grid-row-275">275px</div>    <div class="grid-item grid-row-225">225px</div>    <div class="grid-item grid-row-250">250px</div>    <div class="grid-item grid-row-350">350px</div>    <div class="grid-item grid-row-250">250px</div>    <div class="grid-item grid-row-300">300px</div>    <div class="grid-item grid-row-250">250px</div>    <div class="grid-item grid-row-275">275px</div>    <div class="grid-item grid-row-350">350px</div>    <div class="grid-item grid-row-225">225px</div>  </div></div>

Nested CSS grid layout different behavior in Chrome and Firefox

This appears to be a bug in Firefox. But I'm not sure.

Here's what is clear:

1. The fact that you have nested grid containers matters.

   Your second demo, which works in both Chrome and Firefox, has only one grid container.

   The first demo, which only works in Chrome, has nested grid containers. If you eliminate that nesting, and use only one grid container, the layout works in both browsers.

   So, as a possible cross-browser solution, minimize the nesting of grid containers.

   In this revised demo, I've commented out display: grid on the body and .content elements. The only grid container left is on .main, the parent of the red boxes:

   revised demo

html,body {  height: 100%;  width: 100%;  margin: 0 auto;  padding: 0;}
body {  /* display: grid; */  grid-template-columns: 1fr;  grid-template-rows: 100px 1fr 50px;}
.header {  grid-column: 1/2;  grid-row: 1/2;  display: grid;  grid-template-columns: 1fr;  grid-template-rows: 1fr;  background-color: #57324f;}
.header .title {  grid-column: 1/2;  grid-row: 1/2;  align-self: center;  justify-self: center;  width: 100%;  max-width: 1000px;  color: aliceblue;}
.footer {  grid-column: 1/2;  grid-row: 3/4;  display: grid;  grid-template-columns: 1fr;  grid-template-rows: 1fr;  background-color: #57324f;}
.footer .copyright {  grid-column: 1/2;  grid-row: 1/2;  align-self: center;  font-size: 12px;  justify-self: center;  width: 100%;  max-width: 1000px;  color: aliceblue;}
.content {  grid-column: 1/2;  grid-row: 2/3;  /* display: grid; */  grid-template-columns: 1fr;  grid-template-rows: 0;  background-color: aliceblue;}
.content .main {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  grid-gap: 10px;  grid-auto-flow: dense;  justify-self: center;  width: 100%;  margin-top: 10px;  max-width: 1000px;}
.placeholder {    height: 100px;  position: relative;  border: 1px solid red;}

<div class="header">  <div class="title">    <h2>Header</h2>  </div></div><div class="content">  <div class="main">    <div class="placeholder"></div>    <div class="placeholder"></div>    <div class="placeholder"></div>    <div class="placeholder"></div>    <div class="placeholder"></div>    <div class="placeholder"></div>  </div></div><div class="footer">  <div class="copyright">    <span>Footer</span>  </div></div>

What is the maximum amount of columns and/or rows in a css grid

The CSS grid seems to have a different column/row limit depending on the browser.

For chrome the limit seems to be 1,000x1,000 as explained here in the answer of Bludev

For firefox the limit seems to be 10,000x10,000, but I can't remember exactly where i read this.

CSS-Grid: grid-template-rows auto with different results in Safari, Firefox and Chrome

Solved this by adding another .container and overflow:hidden to the .cover div.

Not sure, why this has to be added for Safari to fit all the divs inside the square though as there actually is no overflow.

Anyways. Use overflow:hidden for Safari when using grid-template-rows: auto min-content; for the auto row.

  html,body {    height:100%;  }
  .wrapper {    width:50%;  }
  .square {    position:relative;    width: 100%;  }
  .square:after {    content: "";    display: block;    padding-bottom: 100%;    background:green;  }
  .container {    position:absolute;    width:100%;    height:100%;}
  .grid {    display:grid;    position:absolute;    height:100%;    width:100%;    grid-template-rows: auto min-content;    grid-template-columns: 100%;    grid-template-areas:      "cover"      "content";    background:grey;  }
  .cover {    grid-area:cover;    display:block;    overflow:hidden;  }
  .image {    max-height:100%;    height:100%;    border:1px solid red;  }
  .content {    grid-area:content;    background:blue;    color:white;  }

<div class='wrapper'>
<div class='square'>  <div class='container'>    <div class='grid'>      <div class='cover'><img src='https://i.imgur.com/I9UFWodl.png' class='image'></div>      <div class='content'>Dynamic Content<br>Can even be multiple lines and the content will stay within the Square</div>    </div>  </div></div>
</div>

min-width not working with CSS grid in Chrome or Edge

This should solve your problem:

iframe {
    max-width: 100%;
    max-height: 100%;
}

Edit: You code shouldn't be working at all, but works in Firefox due to a bug. In Firefox v81, min-width:0; and min-height:0; will cease to work on iframes the way you're using it, and your code will break if you don't change it. You should change it to max-width:100%; instead.

See: https://bugzilla.mozilla.org/show_bug.cgi?id=1664647

---

Related Topics