Grid: Default

Grid Container Desktop: 20px/40px; Mobile: 10px/20px

Page Width

12COL
One Column

8COL
One Column Reading Width

6COL
Two Column

6COL
Three Column

4COL
Four Column

3COL
Two Column Wide Left

8COL
4COL
Two Column Wide Right

4COL
8COL
Fullwidth Grid Container No gutters and margin

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