I have been working on a masonry layout style for the posts list using the CSS flexbox and I achieved the layout but not the masonry layout for the post blocks.
If you check the sample code below you can see I have got the first post forced with 100% width what I want. But the remaining posts are wrapped or aligned equally which I want it to look like masonry.
How can I achieve this layout using CSS flexbox?
/* Box Sizing */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Post Layout Using Flex */
.post_layout {
display: flex;
flex-wrap: wrap;
height: 100vw;
max-height: 800px;
border:1px solid red;
box-sizing: border-box;
}
.first-post {
width: 100%;
transition: .8s opacity;
border:1 px solid green;
}
.col-6 {
width: 50%;
transition: .8s opacity;
border:1px solid blue;
}<div class="post_layout">
<div class="first-post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget placerat lectus. Aliquam erat volutpat. Integer condimentum quis diam sed elementum. Donec vitae tellus in turpis condimentum ullamcorper non in nulla. Praesent erat ligula, facilisis sed augue eget, commodo ultrices eros. Morbi id augue semper, tincidunt purus et, semper ipsum. Vivamus tristique efficitur pharetra. Sed tempus malesuada purus, eget dapibus nibh ultrices vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent ante ipsum, tincidunt at varius et, ornare sed turpis.
</div>
<div class="col-6">
In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
</div>
<div class="col-6">
Praesent efficitur ligula magna, eget maximus nibh maximus a. Nulla facilisi. In hac habitasse platea dictumst. Suspendisse vulputate nulla vitae nunc luctus, vitae venenatis est efficitur. Praesent iaculis, mauris condimentum vulputate fermentum, dui elit rutrum ligula, non efficitur risus tortor sed massa. Sed a dui semper, finibus ex quis, posuere tortor. Duis rutrum lacus vitae feugiat gravida. Nullam a orci sit amet purus tempor commodo. Praesent blandit nisl tellus, non accumsan felis sollicitudin eu. Vivamus fermentum elit id urna varius feugiat. Morbi consequat tortor at eros fringilla, eu euismod nulla consectetur.
</div>
<div class="col-6">
Etiam dictum urna vitae ante varius cursus. Praesent mollis faucibus lorem et dignissim. Nullam consectetur rhoncus luctus. Curabitur ut mattis est. Nullam dictum finibus nisl, nec sollicitudin nibh placerat sit amet. Nam eleifend, leo volutpat gravida porta, nisi ipsum suscipit leo, quis iaculis nulla leo eget turpis. Suspendisse pulvinar at erat in ultricies. Praesent leo metus, bibendum in blandit sed, consequat sed nisi. Phasellus sit amet justo et felis maximus scelerisque. Praesent non dolor porta, scelerisque mauris ac, pharetra massa. Suspendisse blandit eu risus non elementum. Aenean bibendum sed mauris id dignissim. Sed nunc metus, convallis vel sagittis sed, porttitor a diam.
</div>
<div class="col-6">
Etiam auctor odio eu dolor placerat pulvinar non cursus nisl. Vivamus venenatis sollicitudin quam non iaculis. Nullam sagittis dolor nec arcu gravida facilisis. Nulla non eros in metus consequat lacinia. Fusce viverra lectus sed lectus tempor facilisis. Nunc mi enim, pulvinar non vestibulum non
</div>
<div class="col-6">
Nulla facilisi. Nulla pulvinar et nibh in fringilla. Integer pellentesque laoreet viverra. Suspendisse placerat massa et rutrum pretium. Curabitur tincidunt id massa non suscipit. Nunc dictum enim gravida augue interdum, eu luctus massa vulputate. Ut mi leo, facilisis ut massa vel, ullamcorper eleifend sapien. Suspendisse ornare velit cursus consectetur mattis. Phasellus placerat imperdiet nunc, ut facilisis turpis eleifend vel. Donec nec maximus tellus, aliquet sodales turpis. Mauris consectetur justo sem, et vulputate elit ornare sed. Maecenas vel mauris scelerisque lacus finibus bibendum vel id lectus. Aenean in hendrerit velit.
</div>
<div class="col-6">
In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
</div>
</div>
