.grid element is a horizontal row which can contain
.unit elements of various widths.
Width combinations are illustrated below.
Units get stacked on screens 568px or smaller.
Grids in a
.wrap have maximum widths of 978px, or 1140px
with the addition of
All units have even inner and outer gutters.
You can turn gutters off with
There are also a few other commonly needed classes.
Nested grids also work, but the markup gets gnarly pretty quickly.
You have two main options for using Gridism in your project.
Gridism can be installed using the Bower package manager.
bower install gridism
Download the ZIP, extract the source code, and copy
gridism.css into your project’s directory.
Once you’ve acquired the Gridism source code, there’s a couple of other things you’ll probably want to do.
Add the following stylesheet to the
<head> section of your project’s HTML. If you didn’t use Bower, you may need to adjust the path to the CSS file to match your file structure.
<link rel="stylesheet" href="components/gridism/gridism.css">
Set the scale of your viewport to the width of the device. Placing the following tag in the
<head> of your HTML ensures the viewport doesn’t load zoomed-out on mobiles and tablets.
<meta name="viewport" content="width=device-width,initial-scale=1">