Pinterest layout

by infous

HTML

<div class="w">
    
<div class="p">1. Lorem ipsum dolor sit amet.</div>

<div class="p">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad qui similique velit error necessitatibus quae eius minima quod odio corrupti nostrum libero fuga doloremque quas tempora eos neque labore voluptatibus.</div>

<div class="p">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>

<div class="p">4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad qui similique velit error necessitatibus quae eius minima quod odio corrupti nostrum libero fuga doloremque quas tempora eos neque labore voluptatibus.</div>

<div class="p">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad qui similique velit error necessitatibus quae eius minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad qui similique velit error necessitatibus quae eius minima quod odio corrupti nostrum libero fuga doloremque quas tempora eos neque labore voluptatibus.</div>

<div class="p">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad qui similique velit error necessitatibus quae eius minima quod odio corrupti nostrum libero fuga doloremque quas tempora eos neque labore voluptatibus. </div>
    
</div>

CSS

body {
    background: #e8e8e8;
}

.w {
    outline: 1px solid red;
    
	-webkit-column-count: 2;
	-webkit-column-gap: 20px;
	-webkit-column-fill: auto;
	-moz-column-count: 2;
	-moz-column-gap: 20px;
	-moz-column-fill: auto;
	column-count: 2;
	column-gap: 20px;
	column-fill: auto;        
}

.p {
    background: #f8f8f8;

    -webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
    
    margin-bottom: 20px;
    padding: 20px;
    width: auto;
}