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:

* Grid Overlay
* @link
function be_grid_overlay() {
if( ! isset( $_GET['grid'] ) || 'true' !== $_GET['grid'] )
$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:


Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

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

Let's Talk

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson


  1. Marcy Diaz says

    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.

    • Bill Erickson says

      Thanks for the compliments! I’m glad the tools are helpful. I know I sure use them a lot 🙂

  2. Amber Hinds says

    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! 🙂

    • Bill Erickson says

      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.

  3. Richard says


    Also, you can add .grid-overlay { pointer-events: none; } to be able to click though the overlay