6

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>
lepe
  • 24,677
  • 9
  • 99
  • 108
Praveen Tamil
  • 1,076
  • 11
  • 22

1 Answers1

2

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thank you Temani, But my list may contain more than 200 items. When list size get large again the problem get arrised. – Praveen Tamil Mar 02 '19 at 08:51
  • I checked you first solution and it's working fine. But I'd duplicate the list by 3 times, then same problem coming again. Once the list height get reached 5000px, the problem will occur – Praveen Tamil Mar 02 '19 at 08:55
  • @PraveenTamil I think you reached a kind of limit for the number of rows in Chrome .. at least if you decrease the span you will be able to have more element. If you consider my second solution you can still go more ... but you will really have a page with 200 items? – Temani Afif Mar 02 '19 at 09:07
  • 1
    yes correct, In chrome browser the number of rows is limitted to 1000(https://stackoverflow.com/questions/47218341/css-grid-layout-in-chrome-seems-not-to-work-properly-with-more-than-1000-rows#answers). Is there any idea for masontry like list with css only? My list item height is fixed but each may have different value – Praveen Tamil Mar 02 '19 at 09:46
  • @PraveenTamil I don't think so, all the possible methods are listed in the question you already found. – Temani Afif Mar 02 '19 at 09:54