If you’ve seen the layout on Pinterest you probably already know what we are going to be creating here. If not, it’s essentially the stacking of divs or images of different sizes with a set number of columns (view demo). We really do love this style of layout, it gives a different kind of look to the standard Bootstrap columns. So let’s begin:-
HTML
<div class="container">
<div id="list" class="section">
<div class="item" style="height: 14em;"></div>
<div class="item" style="height: 26em;"></div>
<div class="item" style="height: 8em;"></div>
<div class="item" style="height: 14em;"></div>
<div class="item" style="height: 8em;"></div>
<div class="item" style="height: 18em;"></div>
<div class="item" style="height: 16em;"></div>
<div class="item" style="height: 12em;"></div>
</div>
</div>
CSS
#list {
width: 100%;
overflow: hidden;
margin-bottom: -1.875em;
-webkit-column-count: 3;
-webkit-column-gap: 1.875em;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 1.875em;
-moz-column-fill: auto;
column-count: 3;
column-gap: 1.875em;
column-fill: auto;
}
.item {
background-color: #169fe6;
margin-bottom: 1.875em;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
You can see a working demo here.
Can i use this configuration in my blog? https://cucinadelmondo.it/blog/
Sure, we create these blogs so you can re-use and adapt them to your website : )
Hi there,
The code (How to create a responsive Pinterest style layout with CSS) does not work in Firefox as it becomes one col.
Using https://jsfiddle.net/silvawebdesigns/dvy4qnbn/ to open in Firefox.
Hi Eric,
Thanks for spotting this, I gave it a test and it seems to work now in this updated JSFiddle: https://jsfiddle.net/silvawebdesigns/dvy4qnbn/22/
The grid elements are not ordered horizontally