As you can see in our Blog post listing we have implemented a masonry layout. At first it was built with the famous Masonry jQuery plugin created by Dave DeSandro. It was working well and all but we wanted to create it with pure CSS. This is when we found Driveway, an awesome css-grid implementation for the masonry layout.
We have rewritten the classes used by this ‘plugin’ and also dropped some classes like .dw-flp for the flip animation, or .dw__fcs-crtn for the focus effect and so on, but the main functionality stayed the same.
The layout
For start here is a simplified markup of our page:
<div id="blog-item-container">
<div class="blog-item flip-animation">
<!-- Content -->
</div>
<div class="blog-item flip-animation">
<!-- Content -->
</div>
...
</div>The secret
Basically this ‘plugin’ uses the Multi-column CSS Layout and Flex-Box to achieve the layout. Responsivity can be easily maintained by simply using media-queries and setting how many columns you’d like to see. So this is how ours looks like without the browser prefixes:
#blog-item-container {
column-gap: 0;
@include media-query($tablet) {
column-count: 2;
}
@include media-query($laptop) {
column-count: 3;
}
@include media-query($hd) {
column-count: 4;
}
}
.blog-item {
break-inside: avoid;
}break-inside property is only supported in webkit broswers (even there it's called -webkit-column-break-inside). However, there seems to be a way to achieve this layout in the other browsers, too. Add to your blog-item a display: inline-block. It seems to be working this way.
The creator has written a great article about all the efforts and ideas he had during the creation of this plugin, and why he choose css columns instead the flex-box system, which was my first idea to the problem when I haven’t looked into the problem more deeply. It’s a great read, you should really check it out.
