css flexbox grid masonry style - html

Question

I've been trying to achieve the following layout using CSS and Flexbox but without any luck. Maybe someone here could help me out and point me the mistakes I've made and even suggest me the best course to do it.
This should be the final result (having all items different heights and widths but I'm starting to think that flexbox is not the best choice to do it):
Live example: https://jsfiddle.net/bogdaniel/Lzugkva3/5/
<div class="container">
<div class="blog-container">
<div class="blog-item" style="height: 286px;">
<div class="blog-post">
<div class="post-body">
<div class="post-title">
<h2>Item One</h2>
<span>height: 286px;</span>
<p>Item Should Be First In The List On The Left Column</p>
</div>
</div>
</div>
</div>
<div class="blog-item" style=";height: 203px;">
<div class="blog-post">
<div class="post-body">
<div class="post-title">
<h2>Item Two</h2>
<span>height: 203px;</span>
<p>Item Should Go To The right next to the height 286px;</p>
</div>
</div>
</div>
</div>
<div class="blog-item" style="height: 255px;">
<div class="blog-post">
<div class="post-body">
<div class="post-title">
<h2>Item Three</h2>
<span>height: 255px;</span>
<p>Item Should Be Second On the First Row In the List</p>
</div>
</div>
</div>
</div>
<div class="blog-item" style="height: 325px;">
<div class="blog-post">
<div class="post-body">
<div class="post-title">
<h2>Item Four</h2>
<span>height: 325px;</span>
<p>Item Should Go To The right Of Item Three On The Second Column</p>
</div>
</div>
</div>
</div>
<div class="blog-item" style="height: 251px;">
<div class="blog-post">
<div class="post-body">
<div class="post-title">
<h2>Item Five</h2>
<span>height: 251px;</span>
<span>width: 523px;</span> Item Should Start From The Left And Span 2 Columns Almost
</div>
</div>
</div>
</div>
<div class="blog-item" style="height: 282px;">
<div class="blog-post">
<div class="post-body">
<div class="post-title">
<h2>Item Six</h2>
<span>height: 282px;</span>
<span>width: 186px;</span>
<p>Item Should Be Portrait And Span On The Right Column</p>
</div>
</div>
</div>
</div>
<div class="blog-item" style=" width: 100%%; height: 204px;">
<div class="blog-post">
<div class="post-body">
<div class="post-title">
<h2>Item Seven</h2>
<span>height 204px;</span>
<span>with: 523px;</span>
</div>
</div>
</div>
</div>
<div class="blog-item" style="width: 186px; height: 174px;">
<div class="blog-post">
<div class="post-body">
<div class="post-title">
<h2>Item Eight</h2>
<span>height: 174px;</span>
<span>width: 186px;</span>
</div>
</div>
</div>
</div>
</div>
</div>
SCSS code:
.blog-container {
display: flex;
flex-flow: column wrap;
/* Your container needs a fixed height, and it
* needs to be taller than your tallest column. */
min-height: 1400px;
height: 100vh;
/* Force new columns */
&:before,
&:after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
/* Optional */
background-color: #f7f7f7;
border-radius: 3px;
margin: 15px auto;
counter-reset: items;
}
.blog-item {
width: 50%;
padding: 14px;
.blog-post {
height: 100%;
/* Optional */
position: relative;
border-radius: 3px;
border: 1px solid #4290e2;
box-shadow: 0 2px 2px rgba(0, 90, 250, 0.05),
0 4px 4px rgba(0, 90, 250, 0.05), 0 8px 8px rgba(0, 90, 250, 0.05),
0 16px 16px rgba(0, 90, 250, 0.05);
color: #000;
padding: 15px;
&:before {
counter-increment: items;
content: counter(items);
}
.post-body {
padding: 15px;
}
}
}
.blog-item:nth-child(2n + 1) {
order: 1;
}
.blog-item:nth-child(2n + 2) {
order: 2;
}
.blog-item:nth-child(2n + 3) {
order: 1;
}
.blog-item:nth-child(2n + 4) {
order: 2;
}

Answer 1

while waiting for a comment, if the layout is to be like the image, then you can use grid and set ahead amount of rows and cells to span for each element.
useful ressource : https://css-tricks.com/snippets/css/complete-guide-grid/ & https://gridbyexample.com/
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, auto);
}
div:nth-child(1) {
grid-row: span 2;
}
div:nth-child(2) {
grid-column: span 3;
}
div:nth-child(3) {
grid-row: 3
}
div:nth-child(4) {
grid-column: span 3;
grid-row: span 2;
}
div:nth-child(5) {
grid-column: span 3;
}
div:nth-child(6) {
grid-row: span 2
}
div:nth-child(7) {
grid-column: span 3;
grid-row: span 2
}
/* makup */
body {
counter-reset: divs;
background: rgb(236, 244, 175);
}
div:before {
counter-increment: divs;
content: counter(divs);
background: tomato;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
text-align: center;
color: green;
text-shadow: 0 0 3px white;
box-shadow: 0 0 3px;
}
div {
border-radius: 3px;
border: 1px solid darkblue;
background: lightblue;
}
body {
margin: 0;
grid-gap: 2vh;
padding: 2vh;
min-height: 100vh;
box-sizing: border-box;
}
div {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(8px + 1.5vh + 1.5vw)
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
here is a codepen to test and play with (resize/add content, ... )