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;
  $gaps: 50 * $i;
  
  .grid-#{$i} {
      @media (min-width: 992px) {
           grid-template-columns: repeat(auto-fill, minmax(calc((100% - $gaps) / $i), 1fr));
               .grid-error {
                  grid-column-start: 1;
                  grid-column-end: $col-end;
                }
      }
      @media (max-width: 991px) {
           grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
               .grid-error {
                  grid-template-column: 100%;
                }
      }
   

  }
}