Responsive flexbox grid, a digital frontier...

Usage no npm install needed!

<script type="module">
  import thegrid from '';


📐 The Grid

The Grid is a basic and easily customizable grid framework based on flexbox.

For a demo visit There is no other documentation, so I recommend you use your favorite browsers devtools.


The Grid is available on the following package managers:

npm npm install thegrid --save
yarn yarn add thegrid


Import The Grid into your sass files using:

@import "~thegrid"

Change settings by setting these variables in your sass file:

$grid-columns: 12
$grid-breakpoints: ("0px": "", "600px": "-sm", "850px": "-md", "1024px": "-lg")

$grid-gutter-width: 20px
$grid-container-width: 90%
$grid-container-max-width: 1200px

These settings shown above are the default settings, and can be used as a basic drop-in replacement for the Bootstrap 3 grid.


When installed using npm or yarn, a version of The Grid compiled to CSS with the default settings shown above can be found in:


A minified and prefixed version of this file can be found in:


If you just want to load the grid on your website, you can get the latest version from the unpkg CDN like this:

<link rel="stylesheet" href="" />

However, to prevent your website from breaking I recommend you to at least pin a version like so:

<link rel="stylesheet" href="" />