JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<div class="site">
  <header class="master-header">main header</header>
  <h1 class="page-title">page title</h1>
  <div class="main-menu">MAIN MENU</div>
  <div class="main-content">MAIN CONTENT</div>
  <div class="main-content-preview">MAIN CONTENT PREVIEW</div>
  <aside class="sidebar">sidebar</aside>
  <footer class="footer">main footer</footer>
</div>

CSS

body {
  margin: 0px;
}

.site {
  display: grid;
  min-height: 200px;
  min-width: 500px;
  grid-template-columns: 2fr 2fr 4fr 1fr;
  grid-template-areas: "header header header header"
                       "title main main sidebar"
                       "menu main main sidebar"
                       "footer footer footer footer";
}

.site.hiddenSidebar {
  grid-template-columns: 2fr 2fr 4fr minmax(0,0);
}
.site.preview {
  grid-template-areas: "header header header header"
                       "title main preview sidebar"
                       "menu main preview sidebar"
                       "footer footer footer footer";
}

.master-header {
  background: #b46ae3;
  grid-area: header;
  height: 50px;
}

.page-title {
  background: #51a7fa;
  grid-area: title;
  margin: 0;
  height: 50px;
}

.main-menu {
  background: yellow;
  grid-area: menu;
  height: calc(100vh - 50px - 50px - 30px);
  min-height: 70px;
}

.main-content {
  background: #70bf40;
  grid-area: main;
  height: calc(100vh - 50px - 30px);
  min-height: 120px;
}

.main-content-preview {
  display: none;
}

.site.preview .main-content-preview {
  background: red;
  grid-area: preview;
  height: calc(100vh - 50px - 30px);
  min-height: 120px;
  display: block;
}

.sidebar {
  background: #f49018;
  grid-area: sidebar;
}

.site.hiddenSidebar .sidebar {
  display: none;
}

.footer {
  background: #0265c0;
  grid-area: footer;
  height: 30px;
}