grid-template-areas demo

. demo

by allen Yu

HTML

<div class="container">
  <div class="item item1">
    <p>one</p>
  </div>
  <div class="item item2">
    <p>two</p>
  </div>
  <div class="item item3">
    <p>three</p>
  </div>
</div>

CSS

body {
  background-color: #a143ae;
}

.container {
  display: grid;
  grid-gap: 10px;
  border: 3px solid red;
  grid-template-areas: "a a ." "a a ." ". b c";
}

.item {
  display: block;
  background-color: #ffc600;
  border: 3px solid black;
}

.item1 {
  grid-area: a;
}

.item2 {
  grid-area: b;
}

.item3 {
  grid-area: c;
}