JSFiddle - React, Tailwind, and code Playground

by Trufa

HTML

<div class="container">
    <div class="container__row">
        <div class="container__col-12">col-12</div>
    </div>
    <div class="container__row">
        <div class="container__col-6">col-6</div>
        <div class="container__col-6">col-6</div>
    </div>
    <div class="container__row">
        <div class="container__col-4">col-4</div>
        <div class="container__col-4">col-4</div>
        <div class="container__col-4">col-4</div>
    </div>
    <div class="container__row">
        <div class="container__col-3">col-3</div>
        <div class="container__col-3">col-3</div>
        <div class="container__col-3">col-3</div>
        <div class="container__col-3">col-3</div>
    </div>
    <div class="container__row">
        <div class="container__col-2">col-2</div>
        <div class="container__col-2">col-2</div>
        <div class="container__col-2">col-2</div>
        <div class="container__col-2">col-2</div>
        <div class="container__col-2">col-2</div>
        <div class="container__col-2">col-2</div>
    </div>
    <div class="container__row">
        <div class="container__col-1">col-1</div>
        <div class="container__col-1">col-1</div>
        <div class="container__col-1">col-1</div>
        <div class="container__col-1">col-1</div>
        <div class="container__col-1">col-1</div>
        <div class="container__col-1">col-1</div>
        <div class="container__col-1">col-1</div>
        <div class="container__col-1">col-1</div>
        <div class="container__col-1">col-1</div>
        <div class="container__col-1">col-1</div>
        <div class="container__col-1">col-1</div>
        <div class="container__col-1">col-1</div>
    </div>
    <div class="container__row">
        <div class="container__col-1">col-1</div>
        <div class="container__col-2">col-2</div>
        <div class="container__col-6">col-6</div>
        <div class="container__col-2">col-2</div>
        <div class="container__col-1">col-1</div>
    </div>
</div>

SCSS

$grid__bp--md: 768;
$grid-cols: 12;

.container {
  max-width: $grid__bp--md * 1px;
  margin: 0 auto;
  &--fluid {
    margin: 0;
    max-width: 100%;
  }
  &__row {
    display: flex;
    flex-wrap: wrap;
  }
  @for $i from 1 through $grid-cols {
    &__col-#{$i} {
      flex-basis: (100 / ($grid-cols / $i) ) * 1%;
    }
  }
}

//Styling of grid for demostration purposes
.container {
  background-color: #88d8b0;
  padding: 10px;
  box-sizing: border-box;
  &__row {
    background-color: #ffeead;
  }
}

[class*='container__col-'] {
  width: 150px;
    height: 30px;
    background-color: #ff6f69;
    outline: 1px solid #ffcc5c;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}