Break or not to break...
If you want a masonry design today, I think CSS columns are the best option for most simple layouts. But the first challenge you’ll run into is that your blocks, if they contain multiple elements, will wrap smoothly. However, if you have an image with text underneath, you don’t want the image to flow into the first column while the text stays in the second column. Look at these two examples:
<figure>
<img/>
<figcaption>Image text<figcaption>
</figure>
<div>
<p>If the div has a hotpink background and I land in column one...</p>
<p>...and I in column two, the background will break...</p>
</div>But we have a friend to the rescue!
figure {
break-inside: avoid;
}With this one line of code, the image and the figcaption will always stay together. The same applies to the two paragraphs and the pretty hotpink background will remain intact.
Easy!
