A collection of pure CSS grid overlays for designing

Just link the CSS that fits your grid

This button will add the following code to the head HTML tag.

<link rel="stylesheet" href="//s3-eu-west-1.amazonaws.com/graaf/graaf.css">
WidthColumnsGutter
Bootstrap1170px1216pxbootstrap.css
Dribbble970px430pxdribbble.css
Github980px1220pxgithub.css
Graaf793px1016pxgraaf.css
NY Times970px516pxnytimes.css
Twitter1190px410pxtwitter.css

Usage

Projects

Graaf doesn't have any external dependency. To add it to your project, you only need to select the grid that fits for your design and link the stylesheet in your head HTML tag. For example, if you want to add graaf grid overlay, just copy the following code in your head tag:

<link rel="stylesheet" href="//s3-eu-west-1.amazonaws.com/graaf/graaf.css">

Codepen

In Codepen you can link a grid overlay in the project settings. Check the following image and this pen.