NEF grid layout

by phloe

HTML

<div class="section">
  <div class="a large">A</div>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="b">B</div>
</div>

CSS

.section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  grid-auto-flow: row dense;
}

.section > .a {
  grid-column: 2 / span 2;
}

.a {
  padding: 1rem;
  background: bisque;
  height: 10rem; 
}

.a.large {
  height: 15rem;
}