CSS/HTML Sandbox

* { box-sizing: border-box; 
 }
 .grid {
  display: grid;
  margin: auto;
  border: 1px solid #CE454F;
  padding: 5px;
  border-radius: 10px;
  width: 90%;
  max-width: 700px;
  grid-template-columns: 1fr 2fr 2fr 1fr 2fr;
  grid-template-rows: 100px 100px 100px 100px;
  grid-gap: 4px;
  align-items: start;
  justify-items: end;
  direction: ltr;
  writing-m ode: vertical-rl;
}
.grid > * {
  box-sizing: border-box;
  border: 5px solid #526683;
  border-radius: 10px;
  background-color: #89A4BE;
  padding: 10px;
  width: 100%;
  height: 100%;
}
header {
  grid-column: 1;
  grid-row: 1 / 3;
height: 100%;
background: red
}
.one {
  grid-column: 2/-2;
  grid-row: 1 ;
height: 100%;
background: red;
}
.two {
  grid-column: 2 /4;
  grid-row: 2 / 5;
  background: green; z-index: 10;
}
.three{
  grid-column:1;
  grid-row; 1;
  background: yellow;
}
.four {
  grid-column: 5;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  z-index:20;
}
.five {
  grid-column: 4 ;
  grid-row: 2 / 4;
  background: orange
}
.grid div:nth-child(14){
  grid-column: 5;
  grid-row: 1;
background: pink;
}
@media (max-width: 568px) {
	.grid {
  display: block;}
}