SCSS

by Kirk Ross

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-orphan"></div>
  <div class="grid-orphan"></div>
  <div class="grid-orphan"></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;

    &:last-child {
      background: navy; /* how do I target this if I dont know the nth postition? */
    }
  }

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