JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<section class="container debug">
<h2>Description:</h2>
<p>SpaceGrid is a lightweight CSS library used to render a responsive, 12-column grid layout for your modern web design.</p>

<h2>How to use it:</h2>
<p>Download and insert the spacegrid.css into the header of your html document.</p>
<div class="row">
  <div class="col-1">1</div>
  <div class="col-1">1</div>
  <div class="col-1">1</div>
  <div class="col-1">1</div>
  <div class="col-1">1</div>
  <div class="col-1">1</div>
  <div class="col-1">1</div>
  <div class="col-1">1</div>
  <div class="col-1">1</div>
  <div class="col-1">1</div>
  <div class="col-1">1</div>
  <div class="col-1">1</div>
</div>
<div class="row">
  <div class="col-2">2</div>
  <div class="col-2">2</div>
  <div class="col-2">2</div>
  <div class="col-2">2</div>
  <div class="col-2">2</div>
  <div class="col-2">2</div>
</div>
<div class="row">
<div class="col-3">3</div>
<div class="col-3">3</div>
<div class="col-3">3</div>
<div class="col-3">3</div>
</div>
</section>
<div>Padding: <input type="number" id="padding" value="8"></div>
<div>Columns: <input type="number" id="cols" value="12"></div>
<style id="style"></style>

CSS

body{
  font-family: sans-serif;
}
.container {
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
}
.row {
  margin: 0 -4px;
  clear: both;
}
[class*=col-] {
  border: 1px solid #000;
  text-align: center;
  box-sizing: border-box;
  float: left;
  padding: 0 4px;
}
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.debug {
 background: 
  linear-gradient( 
  to right,
  #f00,
  #f00 calc(8.33% - 4px),
  #0f0 calc(8.33% - 4px),
  #0f0 calc(8.33% + 4px),
  #f00 calc(8.33% + 4px),
  #f00 calc(16.67% - 4px),
  #0f0 calc(16.67% - 4px),
  #0f0 calc(16.67% + 4px),
  #f00 calc(16.67% + 4px),
  #f00 calc(25% - 4px),
  #0f0 calc(25% - 4px),
  #0f0 calc(25% + 4px),
  #f00 calc(25% + 4px),
  #f00 calc(33.33% - 4px),
  #0f0 calc(33.33% - 4px),
  #0f0 calc(33.33% + 4px),
  #f00 calc(33.33% + 4px),
  #f00 calc(41.67% - 4px),
  #0f0 calc(41.67% - 4px),
  #0f0 calc(41.67% + 4px),
  #f00 calc(41.67% + 4px),
  #f00 calc(50% - 4px),
  #0f0 calc(50% - 4px),
  #0f0 calc(50% + 4px),
  #f00 calc(50% + 4px),
  #f00 calc(58.33% - 4px),
  #0f0 calc(58.33% - 4px),
  #0f0 calc(58.33% + 4px),
  #f00 calc(58.33% + 4px),
  #f00 calc(66.67% - 4px),
  #0f0 calc(66.67% - 4px),
  #0f0 calc(66.67% + 4px),
  #f00 calc(66.67% + 4px),
  #f00 calc(75% - 4px),
  #0f0 calc(75% - 4px),
  #0f0 calc(75% + 4px),
  #f00 calc(75% + 4px),
  #f00 calc(83.33% - 4px),
  #0f0 calc(83.33% - 4px),
  #0f0 calc(83.33% + 4px),
  #f00 calc(83.33% + 4px),
  #f00 calc(91.67% - 4px),
  #0f0 calc(91.67% - 4px),
  #0f0 calc(91.67% + 4px),
  #f00 calc(91.67% + 4px),
  #f00)
}

JavaScript

function qs(s) {
	return document.querySelector(s);
}
function s(n) {
	return +(n).toFixed(2);
}
function gen() {
	var pad = qs('#padding').value;
	var cols = parseInt(qs('#cols').value);
	var perc = 100/cols;
	var styl = `.debug { background: linear-gradient( to right,#f00,`;
	for(var i = 1; i < cols; i++) {
		styl += `#f00 calc(${s(i*perc)}% - ${pad/2}px),
			#0f0 calc(${s(i*perc)}% - ${pad/2}px),
			#0f0 calc(${s(i*perc)}% + ${pad/2}px),
			#f00 calc(${s(i*perc)}% + ${pad/2}px),`;
	}
	styl += `#f00);}`;
	qs('#style').innerText = styl;
}

qs('#padding').addEventListener('change', gen);
qs('#cols').addEventListener('change', gen);