Fork me on GitHub

Simple Grid

A simple, easy-to-use 12-column responsive grid with some nice features. Built with Simple Grid Generator.

grid-1
m-grid-2
s-grid-3
grid-1
m-grid-2
s-grid-3
grid-1
m-grid-2
s-grid-3
grid-1
m-grid-2
s-grid-3
grid-1
m-grid-2
s-grid-3
grid-1
m-grid-2
s-grid-3
grid-1
m-grid-2
s-grid-3
grid-1
m-grid-2
s-grid-3
grid-1
m-grid-2
s-grid-3
grid-1
m-grid-2
s-grid-3
grid-1
m-grid-2
s-grid-3
grid-1
m-grid-2
s-grid-3

Features

Responsive Overrides

Set the default grid width, then override at different screen widths with breakpoint prefixes. Offset classes work this way also

<div class="grid-3 offset-4 m-grid-6 s-grid-12">
<!-- 
  Translates to: 
  - Quarter width by default
  - Half width at the medium breakpoint
  - Full width at the small breakpoint
-->

<div class="grid-4 offset-6 s-grid-12 s-offset-0">
<!-- 
  Translates to: 
  - Third width, offset to right half of the page
  - Full width at the small breakpoint, no offset
-->

Padding & Margin Classes

For quick, easy layouts, use the grid to set consistent padding and margin on all your elements (top, bottom, left, right, horizontal, vertical, all).

By default, there are 3 levels of padding/margin you can apply (or none).

/* For example... */
.pad-0 { padding: 0; }
.pad-1 { padding: 0.25em; }
.pad-1-sides { padding-left: 0.5em; padding-right: 0.5em; }
.pad-3-bottom { padding-bottom: 2em; }
.marg-3-vert { margin-top: 1em; margin-bottom: 1em; }

Breakpoint prefixes can also be used to easily make layout adjustments for different screen widths.

<div class="pad-1 m-pad-1 s-pad-0">

Setting Up

Do any of the following:

Examples

Resize your browser window to view breakpoint layout changes.

Padding

pad-0
pad-1
pad-2
pad-3
pad-2-sides
pad-2-vert
pad-2-top
pad-2-bottom
pad-2-left
pad-2-right

Responsive Padding

pad-3 m-pad-2 s-pad-1

Nesting

grid-4
grid-4
grid-4

Responsive Nesting

grid-3 m-grid-6 s-grid-12

grid-3 m-grid-6 s-grid-12

grid-3 m-grid-6 s-grid-12

grid-3 m-grid-6 s-grid-12

Complex Responsive Nesting

grid-3 s-grid-12

grid-12
l-grid-6
grid-12
l-grid-6
grid-12
l-grid-6
grid-12
l-grid-6
grid-12
l-grid-6
grid-12
l-grid-6
grid-12
l-grid-6
grid-12
l-grid-6

grid-8 m-grid-9 s-grid-12 l-offset-1

grid-12
grid-6
m-grid-12
grid-6
m-grid-12
grid-6
m-grid-12
grid-6
m-grid-12
grid-12
grid-6
m-grid-3
s-grid-3
grid-6
m-grid-3
s-grid-3
grid-6
m-grid-3
s-grid-3
grid-6
m-grid-3
s-grid-3

Offsets

grid-4 offset-2
grid-4 offset-4
grid-4 offset-6

Responsive Offsets

grid-4 offset-8
m-grid-6 m-offset-6
s-grid-12 s-offset-0

Equal Height Responsive Grid Containers

With grid-flex
grid-12 m-grid-6 l-grid-4 Deleniti, fuga laboriosam fugit inventore soluta architecto. Beatae est earum laborum totam!
grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci maiores labore voluptatum doloremque asperiores eos sit, quam inventore fuga esse. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, fugiat.
grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero at est facere a distinctio nisi eum, minus neque nam commodi.
grid-12 m-grid-6 l-grid-4 Deleniti, fuga laboriosam fugit inventore soluta architecto. Beatae est earum laborum totam!
grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci maiores labore voluptatum doloremque asperiores eos sit, quam inventore fuga esse. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, fugiat.
grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero at est facere a distinctio nisi eum, minus neque nam commodi.
Without grid-flex
grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci maiores labore voluptatum doloremque asperiores eos sit, quam inventore fuga esse. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, fugiat.
grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero at est facere a distinctio nisi eum, minus neque nam commodi.
grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci maiores labore voluptatum doloremque asperiores eos sit, quam inventore fuga esse. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, fugiat.
grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero at est facere a distinctio nisi eum, minus neque nam commodi.

Customize With Sass

If you are familiar with Sass, you can use the Simple Grid Generator mixin to set your own values for:

Number of Columns

Switch to a 18-column or 24-column grid instead.

Breakpoint Prefixing

Change breakpoints, or add more.
(e.g. xs-, xl-, etc.)

Padding & Margin Classes

Add more, take some away. Set the values however you like, px or em. Use only padding (no margin) or just remove them altogether.

For more information, go to the Simple Grid Generator Project Page.

License

Author & copyright (c) 2015: John Polacek, Dual MIT & GPL license