Pure CSS Masonry Layout
Published November 16, 2016 | Categories: Web Development
Source image from www.medium.com
If you need a really simple Masonry layout for your website, than this is easy as it gets without jQuery. This below code is slightly modified from the original to work for some cross browser support and responsive layout.
This allows your content that don’t line up exactly to fill the empty spaces and wrap nicely around each other.
This Masonry layout approach is great for galleries, wrapping columns, directory lists and so much more.
HTML Code:
<div class="masonry-layout">
<div class="masonry-layout-panel">
<div class="masonry-layout-panel-content">
<-- CONTENT HERE -->
</div>
</div>
<div class="masonry-layout-panel">
<div class="masonry-layout-panel-content">
<-- CONTENT HERE -->
</div>
</div>
<div class="masonry-layout-panel">
<div class="masonry-layout-panel-content">
<-- CONTENT HERE -->
</div>
</div>
</div>
CSS Code:
.masonry-layout {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
column-gap: 0;
-webkit-column-gap: 0;
-moz-column-gap: 0;
}
.masonry-layout-panel {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
}This CSS Snippet below is for your CSS Media Query of choice. It breaks down the items to one column for mobile.
.masonry-layout {
column-count: 1;
-webkit-column-count: 1;
-moz-column-count: 1;
}Recent Posts
