<div class="container">
<div class="items">
<div class="item">
<div class="image"></div>
<div class="title"></div>
<div class="content">
<span></span>
<span></span>
<span></span>
</div>
<div class="button"></div>
</div>
<div class="item">
<div class="image"></div>
<div class="title"></div>
<div class="content">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="button"></div>
</div>
<div class="item">
<div class="image"></div>
<div class="title"></div>
<div class="content">
<span></span>
<span></span>
</div>
<div class="button"></div>
</div>
<div class="item">
<div class="image"></div>
<div class="title"></div>
<div class="content">
<span></span>
<span></span>
<span></span>
</div>
<div class="button"></div>
</div>
<div class="item">
<div class="image"></div>
<div class="title"></div>
<div class="content">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="button"></div>
</div>
<div class="item">
<div class="image"></div>
<div class="title"></div>
<div class="content">
<span></span>
<span></span>
</div>
<div class="button"></div>
</div>
</div>
</div>
/*
* Base
*/
* {box-sizing: border-box;}
body {background: #66c3ee;}
/*
* Flexbox Goodness
*/
.items {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item {
display: flex;
flex: 1 1 200px;
flex-direction: column;
// Prevents wrapped elements from spanning the full row when it is solo
max-width: 200px;
}
/*
* Module Styles
*/
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.items {
margin: 0 0 20px -20px;
}
.item {
background: #fafafa;
margin: 20px 0 20px 20px;
padding: 20px;
}
.image {
background: #666;
height: 80px;
margin: 0 auto 15px;
width: 80px;
}
.title {
background: #999;
height: 20px;
margin: 0 auto 10px;
width: 100px;
}
.content {
margin-bottom: 20px;
> span {
background: #ccc;
display: block;
height: 14px;
margin-bottom: 8px;
&:last-child {margin-bottom: 0;}
}
}
.button {
background: #EF3342;
border-radius: 3px;
height: 34px;
margin-top: auto;
}
View Compiled
This Pen doesn't use any external JavaScript resources.