Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Not maintained. Use CSS Grid Layout


Create either float based grids or flexbox based grids using Sass. Why create another grid toolkit in Sass? I wanted to and I couldn't find exactly what I was looking for. Gridsettings uses techniques from many amazing tools and tries to keep usage similar to other systems.

  • Its only dependency is Sass
  • It uses percentage columns within a fixed width or fluid width container
  • It generates all classes based on column number and breakpoints
  • It allows you to customize grid class names
  • It provides the ability of having static width column among fluid, even in a float based grid
  • It has optional default mobile first grid settings

How to setup

There are three ways you can download Gridsettings.

To start using Gridsettings @import the _gridsettings.scss partial into your Sass project after your CSS reset.

@import "path/your-reset";

// Your settings for Gridsettings :)
// Grid Type

$float-grid: false;

$flexbox-grid: true;

// Breakpoints$screen-xs-min: 480px;

$screen-sm-min: 768px;

$screen-md-min: 992px;

$screen-lg-min: 1230px;

// Grid attributes$grid-gutter: 12px;

$grid-columns: 12;

$static-col-width: 300px;

$static-col-name: static;

$grid-col-name: col-;

$grid-xs-bp-name: xs-;

$grid-sm-bp-name: sm-;

$grid-md-bp-name: md-;

$grid-lg-bp-name: lg-;

$grid-push-name: push-;

$grid-pull-name: pull-;

$grid-offset-name: offset-;

$grid-container-name: container;

$grid-row-name: row;

$grid-container-gutter-name: #{$grid-container-name}-gutter;

$container-sm-width: 750px;

$container-sm-width: 750px;

$container-md-width: 970px;

$container-lg-width: 1200px;

@import "path/gridsettings"; // Here is the _gridsettings.scss partial

@import "path/your-styles";

How to use


<div class="container-gutter">
  <div class="container">
    <!-- Two 6/12 columns -->
    <div class="row"><div class="col-xs-6"><div class="content">Content-</div>
      <div class="col-xs-6"><div class="content">Content</div>


Sass, that's it.

Thanks and Resources


The MIT License (MIT)