SCSS

by Siavas Firoozbakht

HTML

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-orphans">
    <div class="grid-orphan"></div>
    <div class="grid-orphan"></div>
    <div class="grid-orphan"></div>
  </div>
</div>

SCSS

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  .grid-item {
    background: gray;
    border: 1px solid white;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100px;
    width: calc(25% - 20px);
    min-width: 360px;
    flex-grow: 2;
    justify-content: flex-start;
    cursor: pointer;

    &:nth-last-child(2) {
      background: navy;
    }
  }

  .grid-orphan {
    height: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    width: calc(25% - 20px);
    min-width: 360px;
    flex-grow: 2;
    justify-content: flex-start;
    cursor: pointer;
  }
}