JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<p> One column grid </p>
<div class="grid grid-1">
  <div class="grid-error"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
</div>

<p> Two column grid </p>
<div class="grid grid-2">
  <div class="grid-error"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
</div>

<p> Three column grid </p>
<div class="grid grid-3">
  <div class="grid-error"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
</div>

<p> Four column grid </p>
<div class="grid grid-4">
  <div class="grid-error"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
</div>

<p> Fives column grid </p>
<div class="grid grid-5">
  <div class="grid-error"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
</div>

<p> Six column grid </p>
<div class="grid grid-5">
  <div class="grid-error"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
    <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
  <div class="grid-el"></div>
</div>

SCSS

* {margin: 0; padding: 0;}

body {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 50px;
}

.grid {
  display: grid;
  grid-gap: 50px;
  padding: 50px;
  border: 1px solid #ccc;
  margin-bottom: 50px;
  
  
  .grid-el {
    width: 100%;
    height: 50px;
    background: #fff;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.18);
  }
  
  .grid-error {
    background: red;
    width: 100%;
    height: 50px;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.18);
  }
}

@for $i from 1 through 6 {
  $col-end: $i + 1;
  
  .grid-#{$i} {
    grid-template-columns: $i fr;
    .grid-error {
      grid-column-start: 1;
      grid-column-end: $col-end;
    }
  }
}