JSFiddle - React, Tailwind, and code Playground

by dsheiko

HTML

<div class="grid">
    <header id="header">Header</header>
    <article class="article">Article</article>
    <aside class="sidebar sidebar1">Sidebar</aside>
    <aside class="sidebar sidebar2">Sidebar</aside>
    <footer id="footer">Footer</footer>
  </div>

CSS

html, body {
  height: 100%;
}
.grid {
  display: -ms-grid;
  -ms-grid-columns: 20% 1fr 20%;
  -ms-grid-rows: auto 5px auto 5px auto;
  text-align: center;
  height: 100%;
}

#header, #footer {
  background: rgb(173, 194, 226);
  -ms-grid-column-span: 3;
}
#header {
  -ms-grid-row: 1;
}
#footer {
  -ms-grid-row: 5;
}

.article {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  background: rgb(255, 255, 204);
}
.sidebar {
  -ms-grid-row: 3;
}
.sidebar1 {
  -ms-grid-column: 1;
  background: rgb(255, 204, 204);
}
.sidebar2 {
  -ms-grid-column: 3;
  background: rgb(255, 153, 153);
}

@media (max-width : 1024px) {
  .grid {
    -ms-grid-columns: 50% 50%;
    -ms-grid-rows: auto 5px auto 5px auto 5px auto;
  }
  .article {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  #header, #footer {
    -ms-grid-column-span: 2;
  }
  .sidebar {
    -ms-grid-row: 5;
  }
  .sidebar1 {
    -ms-grid-column: 1;
  }
  .sidebar2 {
    -ms-grid-column: 2;
  }
  #footer {
    -ms-grid-row: 7;
  }
}

@media (max-width : 800px) {
  .grid {
    -ms-grid-columns: 100%;
    -ms-grid-rows: auto 5px auto 5px auto 5px auto 5px auto;
  }
  .grid > * {
    -ms-grid-column: 1;
  }
  .sidebar2 {
    -ms-grid-row: 7;
  }
  #footer {
    -ms-grid-row: 9;
  }
}