JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="grid">
  <div class="item">header</div>
  <div class="item">sideb</div>
  <div class="item">content</div>
<div class="item">content</div>
<div class="item">footer</div>
  <div class="item">footer</div>
</div>

CSS

body {
  min-height: 100vh;
}

.item {
  padding: 20px;
  background: blue;
}

.item:nth-of-type(1) {
  background: blue;
  grid-area: header;
}

.item:nth-of-type(2) {
  background: silver;
  grid-area: sideb;
}

.item:nth-of-type(3) {
  background: magenta;
  grid-area: content;
}

.item:nth-of-type(4) {
  background: violet;
  grid-area: content;
}

.item:nth-of-type(5) {
  background: cadetblue;
  grid-area: footer;
}

.item:nth-of-type(6) {
  background: navy;
  grid-area: footer;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 200px;
  grid-template-rows: auto auto minmax(200px, max-content) auto auto;
  grid-template-areas:
    "header header header header"
    ". . . ."
    "content content content sideb"
    ". . . ."
    "footer footer footer footer";
  column-gap: 2px;
  row-gap: 10px;
  align-items: stretch;
}

.grid:hover {
  grid-template-areas:
    "content content . sideb"
        ". . . ."
    "header header header ."
    ". . . ."
    "footer footer . .";
}