Foundation grid overlay helper.
// Supports up to 20 column grid. For more support add more spans.
// @NOTE: You can have any number of spans, the grid will only show what is needed.
.grid-helper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: $global-width;
margin: 0 auto;
pointer-events: none;
z-index: 999;
span {
float: left;
display: block;
height: 100vh;
display: none;
text-align: center;
}
@for $i from 1 through $grid-column-count {
span:nth-child( #{$i} ) {
display: block;
width: calc( 100% / #{$grid-column-count} );
border: map-get( $grid-column-gutter, medium ) / 2 solid rgba( red, .2 );
border-top: 0;
border-bottom: 0;
&:before {
content: '#{$i}';
}
}
}
}
<div class="grid-helper">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>