<div class="container">
  <div class="a item">Item a</div>
  <div class="b item">Item b</div>
  <div class="c item">Item c</div>
  <div class="d item">Item d</div>
  <div class="e item">Item e</div>
  <div class="f item">Item f</div>
</div>
.container {
  display: grid;
  grid-template: 
    
      [row1-start] "area-a b c" 50px [row1-end]
      [row2-start] "d e f" 50px [row2-end]
      / 1fr 1fr 1fr;
    
}

.item {
  display: block;

}

.a {
  grid-area: area-a;
  background-color: green;
}

.b {
  grid-area: b;
  background-color: blue;
}

.c {
  grid-area: c;
  background-color: green;
}

.d {
  grid-area: d;
  background-color: yellow;
}

.e {
  grid-area: e;
  background-color: green;
}

.f {
  grid-area: f;
  background-color: red;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.