Grid demo

index.html

<style>

body {
  position: relative;
  display: grid;
  height: 100%;
  grid-template-areas: 
    "m h h  h "
    "m c c  c "
    "m c c  c ";
}

.header {
  background-color: green;
  grid-area: h;
}

.content {
  background-color: red;
  height: 100%;
  grid-area: c;
}

.menu {
  background-color: magenta;
  grid-area: m;
}

.test {
  position: absolute;
  left: 100px;
  top: 50px;
  width: 5px;
  height: 5px;
  background-color: blue;
  
}



</style>


<div class=header>   </div>
<div class=content>  </div>
<div class=menu>   </div>

<div class='test'> </div>

singlecell.html

<style>

body {
  margin: 0;
  position: relative;
  display: grid;
  height: 100%;
  grid-template-areas: "x";
}

body > div {
  grid-area: x;
}

.center {
  justify-self: center;
  align-self: center;
}

.north {
  justify-self: center;
}

.south {
  align-self: end;
  justify-self: center;
}

.west {
  align-self: center;
  justify-self: start;
}

.north-west {
}

.almost-center {
  justify-self: center;
  align-self: center;
  position: relative;
  top: 40px;
}

</style>


<div class=north>          north           </div>
<div class=south>          south           </div>
<div class=west>           west            </div>
<div class=north-west>     north-west      </div>
<div class=center>         center          </div>
<div class=almost-center>  almost-center   </div>