Search code examples
cssgoogle-chromecss-grid

CSS Grid: grid-row not working in Chrome browser

I've listed the div which has a fixed height like masonry. The code works in Firefox, but not in Chrome. The reference code I've referred is CSS-only masonry layout.

Chrome Browser enter image description here Mozila Firefox Browser enter image description here

.container {
  width: 1080px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-auto-rows: 1px;
  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 200;
}

.grid-row-225 {
  grid-row: span 225;
}

.grid-row-250 {
  grid-row: span 250;
}

.grid-row-275 {
  grid-row: span 275;
}

.grid-row-300 {
  grid-row: span 300;
}

.grid-row-350 {
  grid-row: span 350;
}
<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>

Solution

  • 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>

    You can still decrease more:

    .container {
  width: 1080px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-auto-rows: 25px;
  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 8;
}

.grid-row-225 {
  grid-row: span 9;
}

.grid-row-250 {
  grid-row: span 10;
}

.grid-row-275 {
  grid-row: span 11;
}

.grid-row-300 {
  grid-row: span 12;
}

.grid-row-350 {
  grid-row: span 14;
}
    <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>