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:
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;
}
}
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;
...
...
}
Final thoughts
Was this helpful?
What was your use case?
SOCIAL SHARE CARD GENERATOR