Grid

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.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

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.

Variables
Variable	Type	Description	Sample value
$grid-container-name	String	The class name for the grid system's container	'container'
$grid-container-side-padding	Padding (single value)	Left and right padding for the grid system's container	10px
$grid-container-column-count	Integer	Number of columns in the grid	12
$grid-column-padding	Padding	Padding for the grid system's columns	0 4px
$grid-row-name	String	The class name for the grid system's rows	'row'
$grid-column-prefix	String	The class prefix for the grid sytem's columns	'col'
$use-four-step-grid	Logical	Toggles the 4-step grid on or off¹	false
$grid-extra-small-prefix	String	The class prefix for extra small screen columns¹	'xs'
$grid-small-breakpoint	Breakpoint	The grid system's breakpoint for small screens¹	480px
$grid-small-prefix	String	The class prefix for small screen columns	'sm'
$grid-medium-breakpoint	Breakpoint	The grid system's breakpoint for medium-sized screens	768px
$grid-medium-prefix	String	The class prefix for medium-sized screen columns	'md'
$grid-large-breakpoint	Breakpoint	The grid system's breakpoint for large screens	1280px
$grid-large-prefix	String	The class prefix for large screen columns	'lg'
$include-parent-layout	Logical	Enables rows defining the column layout of their children²	true
$grid-rows-parent-layout-prefix	String	The class prefix for the grid's row parents²	'cols'
$grid-column-offset-suffix	String	The class suffix for the grid system's offset columns	'offset'
$grid-column-normal-suffix	String	The class suffix for the grid system's normal order columns	'normal'
$grid-column-first-suffix	String	The class suffix for the grid system's first order columns	'first'
$grid-column-last-suffix	String	The class suffix for the grid system's last order columns	'last'

Notes:

The values of $grid-extra-small-prefix and $grid-small-breakpoint will only be used if $use-four-step-grid is set to true.
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.