JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="container">
  <div class="grid">
    <div class="col-12 l-g-b">12</div>
  </div>

  <div class="grid">
    <div class="col-11 l-g-b">11</div>
    <div class="col-1 l-g-b">1</div>
  </div>

  <div class="grid">
    <div class="col-10 l-g-b">10</div>
    <div class="col-2 l-g-b">2</div>
  </div>

  <div class="grid">
    <div class="col-9 l-g-b">9</div>
    <div class="col-3 l-g-b">3</div>
  </div>

  <div class="grid">
    <div class="col-8 l-g-b">8</div>
    <div class="col-4 l-g-b">4</div>
  </div>

  <div class="grid">
    <div class="col-7 l-g-b">7</div>
    <div class="col-5 l-g-b">5</div>
  </div>

  <div class="grid">
    <div class="col-6 l-g-b">6</div>
    <div class="col-6 l-g-b">6</div>
  </div>

  <div class="grid">
    <div class="col-5 l-g-b">5</div>
    <div class="col-7 l-g-b">7</div>
  </div>

  <div class="grid">
    <div class="col-4 l-g-b">4</div>
    <div class="col-4 l-g-b">4</div>
    <div class="col-4 l-g-b">4</div>
  </div>

  <div class="grid">
    <div class="col-3 l-g-b">3</div>
    <div class="col-3 l-g-b">3</div>
    <div class="col-3 l-g-b">3</div>
    <div class="col-3 l-g-b">3</div>
  </div>

  <div class="grid">
    <div class="col-2 l-g-b">2</div>
    <div class="col-2 l-g-b">2</div>
    <div class="col-2 l-g-b">2</div>
    <div class="col-2 l-g-b">2</div>
    <div class="col-2 l-g-b">2</div>
    <div class="col-2 l-g-b">2</div>
  </div>

  <div class="grid">
    <div class="col-1 l-g-b">1</div>
    <div class="col-1 l-g-b">1</div>
    <div class="col-1 l-g-b">1</div>
    <div class="col-1 l-g-b">1</div>
    <div class="col-1 l-g-b">1</div>
    <div class="col-1 l-g-b">1</div>
    <div class="col-1 l-g-b">1</div>
    <div class="col-1 l-g-b">1</div>
    <div class="col-1 l-g-b">1</div>
    <div class="col-1 l-g-b">1</div>
    <div class="col-1 l-g-b">1</div>
    <div class="col-1 l-g-b">1</div>
  </div>
</div>

SCSS

$grid-gap: .9375rem;
$grid-mobile: 28.75rem;

* {
  box-sizing: border-box;
}

@mixin mobile {
    @media screen and (max-width: #{$grid-mobile}) {
        @content;
    }
}

.container {
 	margin: 3rem auto;
	max-width: 500px;
  padding: 1rem;
  border: 1px solid #ccc;
}

.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-gap: $grid-gap;
	
	&:not(:last-of-type) {
		margin-bottom: $grid-gap;
	}
}

.l-g-b {
	border: 1px solid #ccc;
  height: 50px;
  padding: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.col-12 {
	grid-column: span 12;
}

.col-11 {
	grid-column: span 11
}

.col-10 {
	grid-column: span 10;
}

.col-9 {
	grid-column: span 9;
}

.col-8 {
	grid-column: span 8;
}

.col-7 {
	grid-column: span 7;
}

.col-6 {
	grid-column: span 6;
}

.col-5 {
	grid-column: span 5;
}

.col-4 {
	grid-column: span 4;
}

.col-3 {
	grid-column: span 3;
}

.col-2 {
	grid-column: span 2;
}

.col-1 {
	grid-column: span 1;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  @include mobile {
    grid-column: span 12;
  }
}