Skip to content

Instantly share code, notes, and snippets.

@billerickson billerickson/functions.php Secret
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

This comment has been minimized.

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
You can’t perform that action at this time.