gridism.

A simple responsive CSS grid by @cobyism.

View on GitHub Follow @cobyism

.whole
.half
.half
.two-thirds
.one-quarter
.three-quarters
.one-fifth
.four-fifths
.two-fifths
.three-fifths
.golden-large
.golden-small

Nested grids

Nested grids also work, but the markup gets gnarly pretty quickly.

Gridception!

Gridception!

Gridception!

Download

You have two main options for using Gridism in your project.

Installation

Once you’ve acquired the Gridism source code, there’s a couple of other things you’ll probably want to do.

1. Stylesheet

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="bower_components/gridism/gridism.css">

2. Viewport

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">