Grid example

by ShaCP

HTML

<div id="layout">
  <div>
<p>Left 1</p>
  </div>
  <div>
<p>left 2</p>
  </div>
  <div>
<p>Nav</p>
  </div>
  <div>
<p>Content</p>
  </div>
  <div>
<p>Right</p>
  </div>
</div>

CSS

#layout {
  display: grid;
  grid-template-areas: "one two three three"
    "one two four five";
  grid-template-rows: 1fr 5fr;
  grid-template-columns: 1fr 1fr 5fr 2fr;
  width: 50vmax;
  height: 25vmax;
}

* {
  border: 1px solid black;
  text-align: center;
}

#layout div:nth-child(1) {
  grid-area: one;
  background-color: lightskyblue;
}

#layout div:nth-child(2) {
  grid-area: two;
  background-color: lightyellow;
}

#layout div:nth-child(3) {
  grid-area: three;
  background-color: lightpink;
}

#layout div:nth-child(4) {
  grid-area: four;
  background-color: lightgreen;
}

#layout div:nth-child(5) {
  grid-area: five;
  background-color: lightgray;
}

p {
  margin: 0;
  border: 0;
}