A flexible grid overlay to test your site's alignment.

Overlay Grid

/*    Grid    */

html:before, html:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
    
    /* change to px if you get a scrollbar */
    width: 100%;                
    height: 100%;
    
    /* change grid size, you can even do non-sqaure like 20px 10px */
    -webkit-background-size: 20px 20px;     
       -moz-background-size: 20px 20px;     
            background-size: 20px 20px;    
}

/* you might wanna change opacity and line thinkness if you need a bigger grid  */
html:before {
    background-image: -webkit-gradient( linear, 0 0, 0 100%, color-stop(.95, transparent), color-stop(.95, rgba(0,0,0,.2)) );
    background-image: -moz-linear-gradient( 90deg, transparent 95%, rgba(0,0,0,.2) 95% );
    background-image:      linear-gradient( 90deg, transparent 95%, rgba(0,0,0,.2) 95% );
}

html:after {
    background-image: -webkit-gradient( linear, 0 0, 100% 0, color-stop(.95, transparent), color-stop(.95, rgba(0,0,0,.2)) );
    background-image: -moz-linear-gradient( 180deg, transparent 95%, rgba(0,0,0,.2) 95% );
    background-image:      linear-gradient( 180deg, transparent 95%, rgba(0,0,0,.2) 95% );
}

Hi Simon,
your idea of the grid is very interesting and it could be even more useful if we could still see the grid, even if we scroll the page (just by using position: fixed). What do you think about it?
These days, I worked on similar things:

• https://gist.github.com/7studio/6917704
• necolas/griddle#26

Have a good day,
Xavier.