css grid layouts

by phloe

HTML

<div class="grid">
  <div class="cell-a"></div>
  <div class="cell-b"></div>
  <div class="cell-b"></div>
  <div class="cell-a"></div>
  <div class="cell-b"></div>
  <div class="cell-b"></div>
  <div class="cell-a"></div>
  <div class="cell-b"></div>
  <div class="cell-b"></div>
  <div class="cell-a"></div>
  <div class="cell-b"></div>
  <div class="cell-b"></div>
</div>

CSS

.grid {
  margin: 100px auto;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(65px, 1fr) minmax(65px, 1fr));
  grid-gap: 40px;
  overflow: hidden;
}/*
@media (min-width: 400px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
   }
}
@media (min-width: 800px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
   }
}
*/
.cell-a {
  grid-column-start: span 4;
  grid-row-start: span 2;
  min-height: 300px;
  background-color: red;
}
@media (min-width: 400px) {
  .cell-a {
    grid-column-start: span 8;
   }
}

.cell-a:nth-child(6n+4) {
  grid-column-end: -1;
}

.cell-b {
  grid-column-end: span 4;
  min-height: 150px;
  background-color: green;
}
.cell-b:nth-child(6n+4), .cell-b:nth-child(6n+5) {
  grid-column-start: 1;
}