CSS Grid: Grid-Row Not Working in Chrome Browser

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>

My css grid layout doesn't fill its container on chrome. What's causing the loss of a fraction of a pixel?

It seems that this is a rounding error in chrome. It is possible to recreate the problem with any layout which creates a recurring number sub-pixel fraction for column widths (like 3 or 12 column layouts with 980px), whereas numbers of columns which divide the width easily like 5 or 10 work without issues. The same issues can be caused by grid-column-gap numbers which don't divide nicely.

The simplest fix is to make sure the layout pixel width divides neatly into 12 (6 and 3 work too actually, since chrome can handle one or two decimal places)

body {
  width: 984px;
  background: #99c;
  margin: 0 auto;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 18px;
  background: white;
}

.content-wrap {
  grid-column: span 12;
  width: 100%
}

<div class="row">
  <div class="content-wrap">
    <p>Example paragraph which is fits the full width of the row it's within</p>
  </div>
</div>

CSS grid displaying incorrectly in Google Chrome browser

Add a grid-auto-rows property to your grid. Like:

 grid-auto-rows: 50px;

.wrapper {  max-width: 940px;  margin: 0 auto;  display: -ms-grid;  display: grid;  -ms-grid-columns: (1fr)[3];  grid-template-columns: repeat(3, 1fr);  grid-auto-rows: 50px;}
.wrapper>div {  border: 2px solid #f76707;  border-radius: 5px;  background-color: #fff4e6;  padding: 1em;  color: #5a2916;  }
.item1 {  -ms-grid-column: 1;  grid-column-start: 1;  grid-column-end: 4;  -ms-grid-row: 1;  grid-row-start: 1;  grid-row-end: 3;}
.item2 {  -ms-grid-column: 1;  grid-column-start: 1;  -ms-grid-row: 3;  grid-row-start: 3;  grid-row-end: 5;}

<div class="wrapper">  <div class="item1">One</div>  <div class="item2">Two</div>  <div class="item3">Three</div>  <div class="item4">Four</div>  <div class="item5">Five</div></div>

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

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

Why does my grid item stretch in safari when it does not in chrome and firefox

So apparently putting each and every image in a container of its one "fixes" that behaviour for Safari.

More information about that behaviour can be found here:
https://stackoverflow.com/a/44773109/7243348

Why my grid doesn't work in Chrome but, does in Firefox Developer Edition?

So, to answer my question

Well, the problem is not something with the code but actually with Google Chrome So I'm keeping it here for others to see and find the answer

If you restart your computer or remove the cache it works great and it doesn't have anything to do with the code itself

Well, actually if you just resize the window without going to the responsive panel in the inspect element tool in Chrome it works

I found the answer for this stupid and silly thing after 2 hours of wasting time here and there

---

Related Topics