Issue with Implementing Jumping Masonry-Style Layout in CSS
CSS Grid & Flexbox
Hey everyone, I'm struggling to achieve a masonry-style layout where grid items can rise up and fill in the gaps left by varying item heights. See added screenshots. Here's the breakdown:
Problem: I've been trying to create a responsive layout where the grid items move up to fill in the empty spaces above them, much like a masonry layout. However, neither Flexbox with flex-wrap nor CSS Grid with grid-auto-flow: dense are working as expected.
Cause: The issue seems to be with the way Flexbox and Grid are handling the vertically staggered items. Flexbox doesn't seem to support this feature at all (since its 1-dimensional and all), and while CSS Grid has a dense keyword, it's not producing the desired masonry effect.
Attempts:
I've used display: flex; with flex-wrap: wrap; and justify-content: space-between; in Flexbox.
I've tried using CSS Grid with grid-auto-flow: row dense;.
I've also experimented with different grid-template-columns and grid-auto-rows settings.
Code:
css
/* Flexbox attempt /
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
}
.grid-item {
flex-grow: 1;
margin-bottom: 1rem;
float: left;
word-break: break-all;
}
/ CSS Grid attempt */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: auto;
grid-auto-flow: row dense;
gap: 1rem;
}
.grid-item {
margin-bottom: 1rem;
}
Any advice or insight would be greatly appreciated!
I’m guessing this needs some JS-solution however.
8 Replies
unfortunatly there is no native css way to do masonry grid. (it is currently in development though)
There are some options to do masonry-like layouts with css columns, but they won't span. (so for your desired result it wont work).
with Javascript you could use grid, but then you'll need to calculate how many rows need to be spanned
there are some libraries you can use such as https://masonry.desandro.com/layout
Masonry · Layout
Cascading grid layout library
Kevin just posted a short about a faux masonry layout that might work for you. It's got some pretty big restrictions, but they may or may not apply to your situation https://www.youtube.com/watch?v=NNLxPcEnZDY
Kevin Powell
YouTube
A simple way to make a masonry layout with CSS
Columns can be a handy way to create a masonry layout while we wait for browsers to add support for the grid version.
#css
--
Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monda...
the order of the content is a bit odd, it won't work well for infinite scrolls, and it's only for fixed width content of variable height
Thanks that's def cool. Unfortunately columns or column-count layout from top to bottom. I need a layout that goes from left to right and also has an option to do infinite scrolling. masonry.js is ok, but oh so hacky - I mean it uses floats and position:absolute for its items. 😬
FYI, i proposed CSS masonry layout for Interop 2024. We should be finding out in Feb what made the cut for implementing this year.
I really hope so!
I have good info that Safari is working on it at the moment, but no idea on the timeline or how high priority it is for them
here's the official proposal which is where the interop folks will give the accept/reject response: https://github.com/web-platform-tests/interop/issues/505