Grid

<div class="grid-container pl-spacer-l">
    <h3 class="pl-title">Foundation XY Grid Variables</h3>
    <div class="pl-example-grid-key pl-spacer-s">
        <div>grid-container: 1560px</div>
        <div>grid-columns: 12</div>
        <div>grid-margin-gutters: 30px;/div>
            <div>grid-padding-gutters: 30px</div>
            <div>grid-container-small-padding: 30px</div>
            <div>grid-container-medium-padding: 50px</div>
            <div>grid-container-large-padding: 80px</div>
        </div>
    </div>

    <h3 class="pl-title">Key</h3>
    <div class="pl-example-grid-key pl-spacer-s">
        <div><span class="pl-example-grid-key__swatch pl-example-grid-key__content"></span> Content area (odd)</div>
        <div><span class="pl-example-grid-key__swatch pl-example-grid-key__content-even"></span> Content area (even)
        </div>
        <br />
        <a href="https://foundation.zurb.com/sites/docs/xy-grid.html" target="_blank">See Foundation XY Grid</a>
        from Zurb for more information.
    </div>

    <h1 class="pl-title">Grid</h1>
    <div class="pl-example-grid">
        <div class="grid-container">
            <h2 class="pl-title">Page Width</h2>
        </div>

        <div class="grid-container pl-spacer-l">
            <div class="grid-x grid-margin-x">
                <div class="cell medium-12">12 COL</div>
            </div>
        </div>

        <div class="grid-container">
            <h2 class="pl-title">One Column</h2>
        </div>
        <div class="grid-container pl-spacer-l">
            <div class="grid-x grid-margin-x">
                <div class="cell medium-10 medium-offset-1">10 COL</div>
            </div>
        </div>

        <div class="grid-container">
            <h2 class="pl-title">Reading Width</h2>
        </div>
        <div class="grid-container pl-spacer-l">
            <div class="grid-x grid-margin-x">
                <div class="cell medium-8 medium-offset-2">8 COL</div>
            </div>
        </div>

        <div class="grid-container">
            <h2 class="pl-title">Two Column</h2>
        </div>
        <div class="grid-container pl-spacer-l">
            <div class="grid-x grid-margin-x">
                <div class="cell medium-5 medium-offset-1">5 COL</div>
                <div class="cell medium-5">5 COL</div>
            </div>
        </div>

        <div class="grid-container">
            <h2 class="pl-title">Three Column</h2>
        </div>
        <div class="grid-container pl-spacer-l">
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">4 COL</div>
                <div class="cell medium-4">4 COL</div>
                <div class="cell medium-4">4 COL</div>
            </div>
        </div>

        <div class="grid-container">
            <h2 class="pl-title">Four Column</h2>
        </div>
        <div class="grid-container pl-spacer-l">
            <div class="grid-x grid-margin-x">
                <div class="cell medium-3">3 COL</div>
                <div class="cell medium-3">3 COL</div>
                <div class="cell medium-3">3 COL</div>
                <div class="cell medium-3">3 COL</div>
            </div>
        </div>
    </div>

    <div class="grid-container">
        <h2 class="pl-title">Full width</h2>
    </div>
    <div class="grid-container-full">
        <div class="pl-example-grid pl-example-grid-full">
            <div class="grid-x">
                <div class="cell medium-1"></div>
                <div class="cell medium-1"></div>
                <div class="cell medium-1"></div>
                <div class="cell medium-1"></div>
                <div class="cell medium-1"></div>
                <div class="cell medium-1"></div>
                <div class="cell medium-1"></div>
                <div class="cell medium-1"></div>
                <div class="cell medium-1"></div>
                <div class="cell medium-1"></div>
                <div class="cell medium-1"></div>
                <div class="cell medium-1"></div>
            </div>
        </div>
    </div>
</div>