Skip to content

Instantly share code, notes, and snippets.

@simurai simurai/Overlay Grid
Created Feb 26, 2011

Embed
What would you like to do?
A flexible grid overlay to test your site's alignment.
/* 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% );
}
@7studio

This comment has been minimized.

Copy link

7studio commented Jan 21, 2014

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:

Have a good day,
Xavier.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.