Pure CSS Masonry Layout

Beacon Blog Article

By Zedric Myers | Published November 16, 2016 | Categories: Web Development

source from medium.com 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;

}
Source: www.medium.com

Let's get to work!

Contact Us