CSS Grid

Flexible grid for your web dev. Original: http://jsfiddle.net/simurai/6YCbf/

HTML

<h1>CSS grid</h1>

<p>A flexible way to quickly test if your layout is perfectly aligned to the grid.</p>

<button>I</button><button>&hearts;</button><button>gridsssssssss</button>

CSS

/*    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% );
}



/* --------------------------------------------------------- */

/*    just some basic styles    */

body {
    padding: 40px;
}
h1 {
    font-size: 20px;
    line-height: 20px;
    background-color: pink;
    margin-bottom: 20px;
}
p {
    font-size: 16px;
    line-height: 20px;
    background-color: pink;
    margin-bottom: 20px;
}
button {
    width: 80px;
    height: 20px;
    border: none;
    border-radius: 5px;
    margin: 0 20px 20px 0;
    background-color: #ddd;
}