Metro grid style - html

Question

I'm trying to achieve something like the following page:
https://undsgn.com/uncode/homepages/blog-metro/
I have tried and was able to come as close as this: https://jsfiddle.net/futu7t1c/
But how can I get those 2 small-thumbs at the bottom to move up?
The order is big, small, small, big, small, small
<div id="blog-posts">
<div class="grid big-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
<div class="grid big-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
</div>
css
#blog-posts {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
-moz-column-gap: 0em;
-webkit-column-gap: 0em;
column-gap: 0em;
}
.grid {
background: #eee;
float: left;
position: relative;
color: #fff;
}
.big-thumb {
width: 50%;
height: 600px;
background: #aeaeae;
}
.small-thumb {
width: 25%;
height: 300px;
background: #353535;
}

Answer 1

To replicate that grid, you can make flex rows that have flex children that are also flex columns holding your images.
.flex {
display: flex;
}
.col {
flex-direction: column;
flex: 0 0 50%;
}
img {
max-width: 100%;
vertical-align: top;
}
<div class="flex row">
<div class="flex col">
<div class="big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
<div class="flex row">
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
</div>
</div>
<div class="flex col">
<div class="flex row">
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
</div>
<div class="big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
</div>
Well, that's how you'd do it using regular ol' html/css. But since you want to just have a bunch of elements that automatagically lay out like that, use masonry
$('.masonry').masonry({
itemSelector: '.item',
columnWidth: '.small'
});
body {
margin: 0;
}
.item {
float: left;
}
.big {
width: 50%;
}
.small {
width: 25%;
}
img {
width: 100%;
vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
<div class="item big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="item big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
</div>