Skip to content

Instantly share code, notes, and snippets.

@billerickson
Last active Jan 25, 2019
Embed
What would you like to do?
<?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' );
/* 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;
}
@richerimage
Copy link

richerimage commented Jan 25, 2019

.grid-overlay { pointer-events: none; }

This will enable you to click through the overlay

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment