How to overlay a grid on your website

Most designers use a grid to organize content on the page. When I’m developing a website using their designs, it’s nice to be able to visually access that grid to ensure elements are all lining up as expected. This works great alongside my Column Class Generator, which provides the CSS for implementing the grid.

The following code allows you to add ?grid=true to any URL on the site and have the grid automatically appear on top of everything.

First, add this to your theme’s functions.php file:

<?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

It’s currently set to 16 columns, but you can change that by editing the $columns variable.

Then, add the following to your theme’s CSS file. Update the max-width, column size and gutter size to match your design. If you’d like to change the grid at different breakpoints, add some media queries as well.

/* 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

The z-index on the grid is set to 999 so that it overlays all objects on the page. This also means you won’t be able to click anything on the page (you’ll be clicking on the grid). Change the z-index to -1 to put it behind everything. Example:

css-grid2

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

Reader Interactions

Comments

  1. I was just thinking about where all the grid layout tools had gone this week because I really need one. Thank you so much for this one that’s quick to implement, and easy to configure to work the way I need it! I really appreciate (and use often!) your columns tool, as well.

  2. This would make a great plugin, Bill, that could be turned on and off as needed. In fact, I think I’m going to go build one now. Thanks! 🙂

    • Good idea! The biggest issue with making it a plugin is building in the functionality to customize the grid. Most sites have different sized grids, and often the grid is adjusted for tablet and mobile use. So the user will need to edit all the CSS anyway.

      But I like the idea of being able to turn it on/off via a plugin. Maybe you could fork one of those CSS Editing plugins and make an options page that has a field for How Many Columns, and then a code editor with the base CSS already in place, which they can then tweak.

Leave A Reply