<div class="wrapper">
<div class="block">
<img src="http://placehold.it/350x150">
<div class="content">
<h2>Some title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="block">
<img src="http://placehold.it/350x220">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor. Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="block">
<img src="http://placehold.it/350x300">
<div class="content">
<h2>Small title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="block">
<img src="http://placehold.it/350x120">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor...</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="block">
<img src="http://placehold.it/350x100">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="block">
<img src="http://placehold.it/350x230">
<div class="content">
<h2>A little longer Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor. Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="block">
<img src="http://placehold.it/350x150">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor.</p>
</div>
</div>
<div class="block">
<img src="http://placehold.it/350x300">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="block">
<img src="http://placehold.it/350x100">
<div class="content">
<h2>A Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor. Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="block">
<img src="http://placehold.it/350x350">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue.</p>
</div>
</div>
</div>
@import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Lora|Lato:900);
$heading:'Lato';
$body:'Lora';
body{
background:crimson;
font-family:$body;
color:#444;
line-height:145%;
font-size:rem( 18px );
}
h2{
font-family:$heading;
font-size:rem( 24px );
}
a{
color:darken( crimson, 15% );
}
.wrapper{
@include display( flex );
@include flex-flow( column wrap );
@include align-content( space-between );
height:2000px;
padding:30px;
.block{
width:31.5%;
margin:0 0 30px 0;
box-shadow:0 0 10px rgba(0,0,0,.2);
img{
width:100%;
display:block;
}
.content{
display:block;
margin:0;
padding:5px 15px 15px 15px;
background:#f8f8f8;
}
}
}
View Compiled
/* Look ma, no JS! */
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.