The grid module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as flexbox). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.

Quick overview

Easy page layout is one of the main advantages of using a CSS framework over writing your own styles. The grid module utilizes the Flexbox Layout to provide you with a modern and responsive layout grid system for all your needs. Rules in the grid module help you create basic fluid containers for your grid and allow you to design layouts that work well on all screen sizes using a simple row and column structure. The grid system contains definitions for both fluid columns that resize according to their siblings and columns with preset sizes on different screen sizes, as well as rules that allow you to offset or move certain columns to the first or last place on the grid's row on different devices, helping you present the page in a different layout without duplicating any content. All of the rules in the module are built around accessibility, so screen readers can easily read you pages.

Quick start

To customize the grid module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).

Classes & breakpoints

The grid module's systems are based on custom-named classes for containers, rows and columns, as well as reordering and ofsetting classes, breakpoints and padding.

VariableTypeDescriptionSample value
$grid-container-nameString The class name for the grid system's container'container'
$grid-container-side-paddingPadding (single value) Left and right padding for the grid system's container10px
$grid-container-column-countInteger Number of columns in the grid12
$grid-column-paddingPadding Padding for the grid system's columns0 4px
$grid-row-nameString The class name for the grid system's rows'row'
$grid-column-prefixString The class prefix for the grid sytem's columns'col'
$use-four-step-gridLogical Toggles the 4-step grid on or off1false
$grid-extra-small-prefixString The class prefix for extra small screen columns1'xs'
$grid-small-breakpointBreakpoint The grid system's breakpoint for small screens1480px
$grid-small-prefixString The class prefix for small screen columns'sm'
$grid-medium-breakpointBreakpoint The grid system's breakpoint for medium-sized screens768px
$grid-medium-prefixString The class prefix for medium-sized screen columns'md'
$grid-large-breakpointBreakpoint The grid system's breakpoint for large screens1280px
$grid-large-prefixString The class prefix for large screen columns'lg'
$include-parent-layoutLogical Enables rows defining the column layout of their children2true
$grid-rows-parent-layout-prefixString The class prefix for the grid's row parents2'cols'
$grid-column-offset-suffixString The class suffix for the grid system's offset columns'offset'
$grid-column-normal-suffixString The class suffix for the grid system's normal order columns'normal'
$grid-column-first-suffixString The class suffix for the grid system's first order columns'first'
$grid-column-last-suffixString The class suffix for the grid system's last order columns'last'


  1. The values of $grid-extra-small-prefix and $grid-small-breakpoint will only be used if $use-four-step-grid is set to true.
  2. The value of $grid-row-parent-layout-prefix will only be used if $include-parent-layout is set to true.

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.