Simple scss grid. fully editable.

Usage no npm install needed!

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


Natural Grid

Natural grid is a fully editable, simple, flex-box grids system written in scss.

Getting started

NPM install

First install natural-grid

$ npm i natural-grid --save

Import in your own project

@import '~natural-grid/scss/natural-grid'

CDN load

Comming soon

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

Uses the default settings (see below)

Change default settings

To change the default settings to your own settings. you will need to add the following variable


$grid-breakpoints: (
    'small': 420px,
    'medium': 768px,
    'large': 1024px,
    'huge': 1600px,

Gutter width

$grid-gutter: 32px;

Column count

$grid-columns: 12;

NEW Utilities

You can use simple utilities for spacing.


mt - margin-top
mr - margin-right
mb - margin-bottom
ml - margin-left

my - margin-top & margin-bottom
mx - margin-left & margin-right


pt - padding-top
pr - padding-right
pb - padding-bottom
pl - padding-left

py - padding-top & padding-bottom
px - padding-left & padding-right


Every spacer has his own size you can set them up like this:

$spacers: (
    0: 0,
    1: 0.25rem,
    2: 0.5rem,
    3: 1rem,
    4: 1.5rem,
    5: 3rem,
) !default;

All spacers have there own responsive option like:

<div class="mr-small-1">
    Block with margin right wich is visable from small

<div class="py-medium-4">
    Block with top and bottom padding wich is visable from medium


Thanks for using Natural Grid

  • Author : Jim van Eijk
  • website :
  • github :
  • dribbble :