Foundation grid overlay helper.

_grid-helper.scss

// 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}';
            }
        }
    }
}

index.html

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