Grid Overlay on Website

Featured in: How to overlay a grid on your website

<?php
/**
* Grid Overlay
* @link http://www.billerickson.net/overlay-css-grid
*/
function be_grid_overlay() {
if( ! isset( $_GET['grid'] ) || 'true' !== $_GET['grid'] )
return;
$columns = 16;
echo '<div class="grid-overlay"><div class="wrap"><div class="gutter"></div>';
for( $i = 0; $i < $columns; $i++ ) {
echo '<div class="col"></div><div class="gutter"></div>';
}
echo '</div></div>';
}
add_action( 'wp_footer', 'be_grid_overlay' );
view raw functions.php hosted with ❤ by GitHub
/* Grid
---------------------------------------------------------------------------------------------------- */
/* 1) Set grid max width */
.grid-overlay .wrap {
max-width: 1380px;
}
/* 2) Set size of column and gutter */
.grid-overlay .gutter {
width: 1.449275362%; /* 20/1380 */
}
.grid-overlay .col {
width: 4.710144928%; /* 65/1380 */
}
/* Additional Styles */
.grid-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.grid-overlay .wrap {
margin: 0 auto;
border-right: 1px solid #f00;
padding: 0;
}
.grid-overlay .wrap > div {
border-left: 1px solid #f00;
height: 100vh;
float: left;
}
view raw style.css hosted with ❤ by GitHub

css grid

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk