CODEWITHSUNDEEP
cssgoogle-chromecss-grid
Praveen Tamil
Praveen Tamil

Reputation: 1156

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>

Upvotes: 6

Views: 4223

Answers (1)

Temani Afif
Temani Afif

Reputation: 273004

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>

Upvotes: 2

Related Questions