Grid

<h2 class="sg-title">Grid Container <span>Desktop: 20px/40px; Mobile: 10px/20px</span></h2>
<div class="grid-container sg-example-container">
    <div class="sg-example-grid sg-full-grid">
        <div class="grid-x grid-margin-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 class="sg-example-grid">
    <h2 class="sg-title">Page Width</h2>
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell medium-12">12COL</div>
        </div>
    </div>
    <h2 class="sg-title">One Column</h2>
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell medium-8 medium-offset-2">8COL</div>
        </div>
    </div>
    <h2 class="sg-title">One Column Reading Width</h2>
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell medium-6 medium-offset-3">6COL</div>
        </div>
    </div>
    <h2 class="sg-title">Two Column</h2>
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell medium-6">6COL</div>
            <div class="cell medium-6">6COL</div>
        </div>
    </div>
    <h2 class="sg-title">Three Column</h2>
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell medium-4">4COL</div>
            <div class="cell medium-4">4COL</div>
            <div class="cell medium-4">4COL</div>
        </div>
    </div>
    <h2 class="sg-title">Four Column</h2>
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell medium-3">3COL</div>
            <div class="cell medium-3">3COL</div>
            <div class="cell medium-3">3COL</div>
            <div class="cell medium-3">3COL</div>
        </div>
    </div>
    <h2 class="sg-title">Two Column Wide Left</h2>
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell medium-8">8COL</div>
            <div class="cell medium-4">4COL</div>
        </div>
    </div>
    <h2 class="sg-title">Two Column Wide Right</h2>
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell medium-4">4COL</div>
            <div class="cell medium-8">8COL</div>
        </div>
    </div>
</div>
<h2 class="sg-title">Fullwidth Grid Container <span>No gutters and margin</span></h2>
<div class="grid-container-full">
    <div class="sg-example-grid sg-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>