2 Columns (small), 3 Columns (large)

by incutonez

HTML

<div class="grid">
  <div class="item contain">
    One
  </div>
  <div class="item">
    Two
  </div>
  <div class="item">
    Three
  </div>
  <div class="item">
    Four
  </div>
  <div class="item">
    Five
  </div>
  <div class="item">
    Six
  </div>
  <div class="item tall">
    Seven
    <div>
      More Stuff
    </div>
    <div>
      More Stuff
    </div>
  </div>
  <div class="item">
    Eight
  </div>
  <div class="item tall">
    Nine
  </div>
  <div class="item">
    Ten
  </div>
  <div class="item">
    Eleven
  </div>
</div>

CSS

.grid {
  display: grid;
  height: 144px;
  grid-template-rows: repeat(6, auto);
  grid-template-columns: 23rem 1fr;
  grid-auto-flow: column;
}

.tall {
  grid-row: span 2;
}

.item {
  padding: 1rem;
  border: 1px solid gray;
}

.item:nth-child(odd) {
  background-color: lightblue;
}

.item:nth-child(even) {
  background-color: lightgreen;
}

@media only screen and (min-width: 1280px) {
  .grid {
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: 19rem 25rem 1fr;
    grid-auto-flow: column;
  }
}