Pure CSS grid overlays for designing

Just link the CSS that fits your grid or create your custom overlay

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

<link rel="stylesheet" href="https://grids.graaf.space/793/10/16.css">

Grids

Now, You can create your custom grid overlays using the new Graaf API. Just set your grid parameters in the path:

<link rel="stylesheet" href="https://grids.graaf.space/WIDTH/COLUMNS/GUTTER.css">
<link rel="stylesheet" href="https://grids.graaf.space/793/10/16.css">

The collection

You can use a predefined grid overlay from the collection:

WidthColumnsGutter
A Book Apart940px1220pxabookapart.css
A List Apart960px824pxalistapart.css
BBC News976px1216pxbbc.css
Bootstrap1170px1216pxbootstrap.css
CNN Inter.1100px720pxcnn.css
Dribbble970px430pxdribbble.css
Github980px1220pxgithub.css
Graaf793px1016pxgraaf.css
Harvard1176px1220pxharvard.css
HBO1184px1224pxhbo.css
Medium1000px318pxmedium.css
NY Times970px516pxnytimes.css
Product Hunt1070px820pxproducthunt.css
Soundcloud1180px1220pxsoundcloud.css
The guardian1100px1420pxtheguardian.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="https://grids.graaf.space/graaf.css">

Custom grids

If you need a more specific grid, you can link a custom stylesheet using the Graaf API. You only need to modify the placeholders:

<link rel="stylesheet" href="https://grids.graaf.space/WIDTH/COLUMNS/GUTTER.css">

For example, the next link will include a 793px width, 10 columns and 16px of gutter grid overlay in your site:

<link rel="stylesheet" href="https://grids.graaf.space/793/10/16.css">

Codepen

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