Menu
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
Mozila Firefox Browser
.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>
310
Select Show Layout from the Command Menu (Cmd + Shift + P). Explore the different options available here, such as: Toggling Grid overlays on and off. Enabling track sizes , area names and extended grid lines .
The supporting browsers Other than in Internet Explorer, CSS Grid Layout is unprefixed in Safari, Chrome, Opera, Firefox and Edge. Support for all the properties and values detailed in these guides is interoperable across browsers.
The problem is that you are applying the grid-template-columns property to grid items. This is a grid container property. It will be ignored on grid items (unless they are also grid containers). Instead use the grid-column and grid-row properties, which apply to grid items.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
