This content originally appeared on DEV Community and was authored by Reuven Hozias
What is masonry layout?
from MDN:
Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a masonry layout. On the masonry axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to completely fill the gaps.
pinterest.com's layout is one classic example of it:
What can we use from our CSS toolbox?
grid
We use a simple HTML markup:
<div class="photos">
<img src="./img/image-1.jpg" alt="sample">
...
...
</div>
My first shot was grid & grid-template-column
.photos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
img{
width: 100%;
}
}
The responsiveness is great, but we have gaps below each image.
column-count
next, use the column-count CSS container property.
The column-count CSS property breaks an element's content into the specified number of columns.
.photos {
column-count: 4;
img{
width: 100%;
margin-bottom: 1rem;
}
}
Not good.
The current layout looks as desired, but the images are scaled and not responsive. While we could use media queries to control responsiveness, we’re aiming for a more robust solution.
Using columns
The columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
.photos {
columns: 250px;
img{
width: 100%;
margin-bottom: 1rem;
}
}
A single line of code. Amazing!
How does this work?
Each column is given a minimum width of 250px. If there is extra space beyond 250px, the columns will expand to fill the space. If the space is reduced, the number of columns will decrease accordingly.
Extras
We can limit the number of columns by setting the layout to a maximum of X columns:
.photos {
columns: 250px 2;
...
...
}
Using
columns
is not limited to masonry image layouts alone. We can also use it to style text columns: same CSS, different content.
Final thoughts
Was this helpful?
What was your use case?
This content originally appeared on DEV Community and was authored by Reuven Hozias
Reuven Hozias | Sciencx (2024-11-06T08:51:12+00:00) CSS: masonry layout. Retrieved from https://www.scien.cx/2024/11/06/css-masonry-layout/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.