JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="container">
  <div class="header valign">
    <div class="gutter-left-10">CSS Grids</div>
  </div>
  <div class="sidebar"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

SCSS

body {
  margin: 0;
  padding: 0;
}

.container > div {
  box-sizing: border-box;
  border: 3px solid #222;
  background: linear-gradient(violet, cornflowerblue);
}

.container {
  display: grid;
  width: 100%;
  height: auto;
  grid-gap: 10px;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 80px;
  grid-template-areas: "header header" "sidebar content" "footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
  padding: 10px;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}


/* MISC */

* {
  font-family: Helvetica;
  font-size: 1.05em;
}

@for $i from 1 through 10 {
  $num: $i * 5;
  .gutter-top-#{$num} { margin-top: $num + px; }
  .gutter-bottom-#{$num} { margin-bottom: $num + px; }
  .gutter-left-#{$num} { margin-left: $num + px; }
  .gutter-right-#{$num} { margin-right: $num + px; }
}

.valign {
  display: flex;
  align-items: center;
}

JavaScript

new Array(10).fill(0).map((e, i) => $('.sidebar').append($('<div>').text(`Sidebar Item #${i + 1}`).addClass('gutter-bottom-10')));