div flow

by benvanlooy

HTML

<div class="container">
  
  <div class="post-wrapper">
    <div class="post">1</div>
  </div>
  
  <div class="post-wrapper">
    <div class="post">2</div>
  </div>
  
  <div class="post-wrapper fourth">
    <div class="post">3</div>
  </div>
  
  <div class="post-wrapper fourth">
    <div class="post">4</div>
  </div>
  
  <div class="post-wrapper">
    <div class="post">5</div>
  </div>
  
   <div class="post-wrapper">
    <div class="post">6</div>
  </div>
  
  <div class="post-wrapper">
    <div class="post">7</div>
  </div>
  
  <div class="post-wrapper">
    <div class="post">8</div>
  </div>
  
</div>

CSS

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container .post-wrapper{
  padding: 10px;
  width: 50%;
  height: 200px;
  box-sizing: border-box;
}

.container .post-wrapper.fourth{
  width: 25%;
  height: 410px;
}

.container .post-wrapper .post{
  background-color: #cccccc;
  width: 100%;
  height: 100%;
}