.item1 { grid-area: header; }

.item2 { grid-area: menu; }

.item3 { grid-area: main; }

.item4 { grid-area: right; }

.item5 { grid-area: footer; }

​

.grid-container {

  display: grid;

  grid-template-areas:

    'header header header header header header'

    'menu main main main right right'

    'menu footer footer footer footer footer';

  grid-gap: 10px;

  background-color: #2196F3;

  padding: 10px;

}

​

.grid-container > div {

  background-color: rgba(255, 255, 255, 0.8);

  text-align: center;

  padding: 20px 0;

  font-size: 30px;

}