JSFiddle - React, Tailwind, and code Playground

by Eduard Dyckman

HTML

<div class="parent">
  <div class="footer">FOOTER</div>
  <div class="header">HEADER</div>
  <div class="main">MAIN</div>
  <div class="side">SIDE</div>
</div>

CSS

.parent {
  width: 100%;
  display: -ms-grid;
  display: grid;
      grid-template-areas:
    "header header header"
    "main . side"
    "footer footer footer";
}

.main {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  border: 1px solid green;
  grid-area: main;
}
.side {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  border: 1px solid red;
  grid-area: side;
}
.header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  border: 1px solid brown;
  grid-area: header;
}
.footer {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  border: 1px solid cyan;
  grid-area: footer;
}