xs sm md lg

Grid Framework

A highly customizable responsive grid framework

Your grid

Generate exactly the grid that you want. Choose the number of columns, the features and the breakpoints for your website.

Lightweight

Only as big as you need it to be. From 500B up to 12KB for a fully responsive, multi-breakpoint grid with the features you expect.

Some examples
@include make-grid(3, 'xs');
  

3 columns on the smallest screens

.col-xs-1-3
.col-xs-2-3
.col-xs-3-3
Define your own breakpoints
@media (min-width: $breakpoint-sm) {
  @include make-grid(6, 'sm');
}
  
.col-sm-1-6
.col-sm-5-6
.col-sm-2-6
.col-sm-4-6
.col-sm-3-6
.col-sm-3-6
.col-sm-2-6
.col-sm-2-6
.col-sm-2-6
.col-sm-6-6
With gutters
<div class="row row-gutter">
  <div class="col-xs-1-3">.col-xs-1-3</div>
  <div class="col-xs-1-3">.col-xs-1-3</div>
  <div class="col-xs-1-3">.col-xs-1-3</div>
</div>
  
.col-xs-1-3
.col-xs-1-3
.col-xs-1-3
Completely responsive and configurable

(resize your window to see the grid adapt from `xs` screens to `lg` screens)

@include make-grid(3, 'xs');

@media (min-width: $breakpoint-sm) {
  @include make-grid(5 6, 'sm');
}

@media (min-width: $breakpoint-md) {
  @include make-grid(10 12, 'md');
}

@media (min-width: $breakpoint-lg) {
  @include make-grid(24, 'lg');
}
  
<div class="row">
  <div class="col-xs-1-3 col-sm-1-6 col-md-1-12 col-lg-1-24"></div>
  ...
</div>
  
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
xs sm md lg
Prefer without a prefix? No problem:
@include make-grid(12, '');
// .col-1-12, .col-2-12, etc.
  
Want offset, push and pull? As you wish:
@include make-grid(12, 'sm', 'offset' 'push' 'pull');
// .col-offset-sm-3-12, .col-push-sm-4-12, .col-pull-sm-5-12

// offset comes by default, use an empty string to remove it
@include make-grid(12, 'sm', '');
  
.col-md-4-12.col-push-md-8-12
.col-md-8-12.col-pull-md-4-12
.col-md-5-12.col-offset-md-1-12
.col-md-5-12.col-offset-md-1-12
Prefer 1-2 over 6-12? Enable smart class names:
$gf-smart-class-names: true; // before the import

@import "grid-framework";

@include make-grid(12, 'md');
// .col-md-1-2, .col-md-1-3, .col-md-1-4, .col-md-1
  
Nostalgic about Bootstrap 2's span prefix? Ok!
$gf-prefix: 'span'; // before the import

@import "grid-framework";

@include make-grid(12, '');
// .span-1-12, .span-2-12, .span-3-12
  
Define multiple grids at once
@include make-grid(10 12, 'md');
  
.col-md-1-10
.col-md-9-10
.col-md-2-10
.col-md-8-10
.col-md-3-10
.col-md-7-10
.col-md-4-10
.col-md-6-10
.col-md-5-10
.col-md-5-10
.col-md-1-10
.col-md-2-10
.col-md-3-10
.col-md-4-10
.col-md-10-10
.col-md-1-12
.col-md-11-12
.col-md-2-12
.col-md-10-12
.col-md-3-12
.col-md-9-12
.col-md-4-12
.col-md-8-12
.col-md-5-12
.col-md-7-12
.col-md-6-12
.col-md-6-12
.col-md-2-12
.col-md-6-12
.col-md-4-12
.col-md-12-12