Digital Solutions

CSS Grid

<!DOCTYPE html>
<html>
  <head>
    <title>css grid</title>
    <link rel="stylesheet" type="text/css" href="cssgrid.css">
  </head>
  <body>
    <div id="layout">
        <div id="top">header</div>
        <div id="left">left column</div>
        <div id="middle">
          main<br>
          content<br>
          area<br>
        </div>
        <div id="right">right column</div>
        <div id="bottom">Copyright &copy; Symbol</div>
    </div>
  </body>
</html>

cssgrid.css

#layout{
  display: grid;
  grid-template-areas:
      'top top top top'
      'left middle middle right'
      'bottom bottom bottom bottom';
}

#top{
  background-color: thistle;
  grid-area: top;
}

#left{
  background-color: tomato;
  grid-area: left;
}

#middle{
  background-color: forestgreen;
  grid-area: middle;
}

#right{
  background-color: bisque;
  grid-area: right;
}

#bottom{
  background-color: deeppink;
  grid-area: bottom;
}