The Old Good Verge Grid

Responsive colorlul article grid

Example below illustrates how to make a colorful articles grid, like the one theverge.com once had on their homepage. In the end of 2016 they made a redesign and the grid was removed. Example below is a reproduction of it, not completely the same, but very similar. It's fully responsive and can be easily implemented in any blog or news site.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="masonry">
<div class="masonry-col col-left">
<div class="masonry-brick brick-large" style="background-image: url('/images/tablets-400-350.jpg');">
<div class="brick-content">
<h2 class="brick-heading">The 10 best tablets you can buy in 2017</h2>
<p class="by-line">By John Smith <span class="count-label">120</span></p>
</div>
</div>
<div class="masonry-brick" style="background-image: url('/images/iphone-gold-400-175.jpg');">
<div class="brick-content">
<h2 class="brick-heading">Why gold iPhone is so popular</h2>
<p class="by-line">By John Smith <span class="count-label">254</span></p>
</div>
</div>
</div>
<div class="masonry-col col-middle">
<div class="masonry-brick" style="background-image: url('/images/frozen-bubble-400x175.png');">
<div class="brick-content">
<h2 class="brick-heading">Beautiful things around us</h2>
<p class="by-line">By John Smith <span class="count-label">82</span></p>
</div>
</div>
<div class="masonry-brick" style="background-image: url('/images/kuala-lumpur-hdr-400-175.jpg');">
<div class="brick-content">
<h2 class="brick-heading">How to make cool HDR photo with your phone</h2>
<p class="by-line">By John Smith <span class="count-label">154</span></p>
</div>
</div>
<div class="masonry-brick" style="background-image: url('/images/desk-setup-400-175.jpg');">
<div class="brick-content">
<h2 class="brick-heading">Perfect desk setup for working from home</h2>
<p class="by-line">By John Smith <span class="count-label">172</span></p>
</div>
</div>
</div>
<div class="masonry-col col-right">
<div class="masonry-brick" style="background-image: url('/images/train-toy-400-175.jpg');">
<div class="brick-content">
<h2 class="brick-heading">Beautiful things around us</h2>
<p class="by-line">By John Smith <span class="count-label">75</span></p>
</div>
</div>
<div class="masonry-brick brick-large" style="background-image: url('/images/private-house-400-350.jpg');">
<div class="brick-content">
<h2 class="brick-heading">All you need to know to make your home smart</h2>
<p class="by-line">By John Smith <span class="count-label">28</span></p>
</div>
</div>
</div>
</div>
</div>
HTML
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab:400,700');

.container {
max-width: 1200px;
margin: 0 auto;
}

.masonry-brick {
position: relative;
box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
background-position: center top;
background-size: cover;
}

.masonry-brick {
height: 175px;
}

.masonry-brick:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.7;
}

.col-left .masonry-brick:nth-child(1):after {
background-color: #292484;
background-image: -webkit-linear-gradient(135deg, #292484,#dc4225);
background-image: -moz-linear-gradient(135deg, #292484,#dc4225);
background-image: -o-linear-gradient(135deg, #292484,#dc4225);
background-image: linear-gradient(135deg, #292484,#dc4225);
}

.col-left .masonry-brick:nth-child(2):after {
background-color: #d38312;
background-image: -webkit-linear-gradient(135deg, #d38312,#a83279);
background-image: -moz-linear-gradient(135deg, #d38312,#a83279);
background-image: -o-linear-gradient(135deg, #d38312,#a83279);
background-image: linear-gradient(135deg, #d38312,#a83279);
}

.col-middle .masonry-brick:nth-child(1):after {
background-color: #002f4b;
background-image: -webkit-linear-gradient(135deg, #002f4b,#417711);
background-image: -moz-linear-gradient(135deg, #002f4b,#417711);
background-image: -o-linear-gradient(135deg, #002f4b,#417711);
background-image: linear-gradient(135deg, #002f4b,#417711);
}

.col-middle .masonry-brick:nth-child(2):after {
background-color: #d38312;
background-image: -webkit-linear-gradient(135deg, #d38312,#002f4b);
background-image: -moz-linear-gradient(135deg, #d38312,#002f4b);
background-image: -o-linear-gradient(135deg, #d38312,#002f4b);
background-image: linear-gradient(135deg, #d38312,#002f4b);
}

.col-middle .masonry-brick:nth-child(3):after {
background-color: #417711;
background-image: -webkit-linear-gradient(135deg, #417711,#dc4225);
background-image: -moz-linear-gradient(135deg, #417711,#dc4225);
background-image: -o-linear-gradient(135deg, #417711,#dc4225);
background-image: linear-gradient(135deg, #417711,#dc4225);
}

.col-right .masonry-brick:nth-child(1):after {
background-color: #292484;
background-image: -webkit-linear-gradient(135deg, #292484,#a83279);
background-image: -moz-linear-gradient(135deg, #292484,#a83279);
background-image: -o-linear-gradient(135deg, #292484,#a83279);
background-image: linear-gradient(135deg, #292484,#a83279);
}

.col-right .masonry-brick:nth-child(2):after {
background-color: #e0be00;
background-image: -webkit-linear-gradient(135deg, #e0be00,#dc4225);
background-image: -moz-linear-gradient(135deg, #e0be00,#dc4225);
background-image: -o-linear-gradient(135deg, #e0be00,#dc4225);
background-image: linear-gradient(135deg, #e0be00,#dc4225);
}

.brick-content {
padding: 20px;
position:relative;
z-index:1;
}

.brick-heading {
margin: 0;
color: #fff;
font-family: 'Roboto Slab', serif;
font-weight: 400;
font-size: 21px;
line-height: 25px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
margin-bottom: 15px;
}

.by-line {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
margin: 0;
}

.count-label {
display: inline-block;
text-align: center;
min-width: 25px;
background-color: #95ae20;
color: #fff;
float: right;
padding: 1px 2px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
font-size:11px;
}

@media (min-width: 768px) {
.masonry-col {
width: 33.3333%;
float: left;
}

.brick-large {
height: 350px;
}

.brick-large .brick-heading {
font-size: 32px;
line-height: 40px;
}
}

@media (min-width: 992px) {
.brick-large .brick-heading {
font-size: 37px;
line-height: 45px;
}
}
CSS
Plugins used:
jQuery Apache 2.0
Browser support:
           
11+