div flow

by Varsha Alangar

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 col-dir">
        <div class="post inner">5</div>
        <div class="post inner">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%;
}

.container .post-wrapper.col-dir{
  height: 410px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.container .post.inner {
  height: 185px;
}