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.
| 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 off1 | false |
| $grid-extra-small-prefix | String | The class prefix for extra small screen columns1 | 'xs' |
| $grid-small-breakpoint | Breakpoint | The grid system's breakpoint for small screens1 | 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 children2 | true |
| $grid-rows-parent-layout-prefix | String | The class prefix for the grid's row parents2 | '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-prefixand$grid-small-breakpointwill only be used if$use-four-step-gridis set totrue. - The value of
$grid-row-parent-layout-prefixwill only be used if$include-parent-layoutis set totrue.
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.