Create masonry layouts with CSS Grid
Just specify the number of columns and we’ll take care of the rest.
<div class="masonry [--cols:2]"> <div>...</div> <div>...</div> <div>...</div> <div>...</div></div>Allow grid items span different columns
You can span an item across multiple columns with the --span property. (No other masonry layouts on the internet lets you do this so easily).
Dense supported
Since we use CSS Grid, you can also use dense to pack smaller items upwards.
<div class="masonry [--cols:3] dense"> <div>...</div> <div>...</div> <div>...</div> ...</div>Make it responsive easily
Like grid-simple, you just have to change the --cols property at different breakpoints to make a responsive masonry layout.
<div class="masonry md:[--cols:2] lg:[--cols:3]"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div></div> Resize to see this work!
Item-sizing supported
Instead of using --cols to determine the number of columns, you can let CSS Grid create intrinsic columns with masonry-gallery and --item-width.
Resize to see this work!
Automatically waits for images and videos to load
masonry waits for images and videos to load before it calculates the layout. This ensures your layout is accurate regardless of the content you contained within each grid item.