How to Create Masonry Layouts With CSS3

Usually to create a layout like pinterest.com we use a plugin from desandro, namely the jQuery masonry plugin.

But in this tutorial I will create a masonry layout like pinterest using only CSS3 without involving the jquery plugin. How to ?

masonry css only

First, we must know and learn about CSS3 Multiple Columns.

CSS3 Multiple Columns has several properties, here I will use several properties, including:

column-count
column-gap
divs {
column-count: 3 ;
column-gap:15px;
}
The column-count property with a value of 3 written in the script indicates that the layout will display 3 columns.
In the column-gap property with a value of 15px written in the script shows the distance between the columns is 15px.
For more details, please learn CSS3 Multiple Columns here.

Having studied CSS3 Multiple Columns, let’s discuss what our main goal is, creating a page like pinterest.

Here’s the HTML script we created:

• … …

Then the CSS we create as follows:

CSS container creation section

.container {
max-width: 1170px;
padding: 0px 15px;
margins: 30px auto;
}
CSS column creation section

.content-columns {
list-style: none;

-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;

-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;
}
CSS boxed section