Grid

CSS grid with container, row and columns

CSS for the grid can be found in the /css/ig-base.css file.

General structure

<div class="container">
    <div class="row">
        <div class="col-70 col-s-100">70% wide column, 100% on mobile</div>
        <div class="col-30 col-s-100">30% wide column, 100% on mobile</div>
    </div>
</div>

Container

<div class="container container--small">Small</div>
<div class="container">Standard</div>
<div class="container container--big">Big</div>
<div class="container container--fluid">100% width</div>

Row

<div class="row"></div>

<div class="row row--flat">Remove gutters</div>

<div class="row row--center">Horizontal align center</div>
<div class="row row--left">Horizontal align start</div>
<div class="row row--right">Horizontal align end</div>
<div class="row row--space-around">Horizontal align space-around</div>
<div class="row row--space-between">Horizontal align space-between</div>
<div class="row row--space-evenly">Horizontal align space-evenly</div>

<div class="row row--v-top">Vertically align start</div>
<div class="row row--v-center">Vertically align center</div>
<div class="row row--v-center">Vertically align end</div>

<div class="row row--reverse">Reverse order of columns</div>

Columns

<div class="col">Will grow to fit row</div>

<div class="col-10">10%</div>
<div class="col-16">16%</div>
<div class="col-20">20%</div>
<div class="col-25">25%</div>
<div class="col-30">30%</div>
<div class="col-33">33%</div>
<div class="col-40">40%</div>
<div class="col-45">45%</div>
<div class="col-50">50%</div>
<div class="col-55">55%</div>
<div class="col-60">60%</div>
<div class="col-66">66%;</div>
<div class="col-70">70%</div>
<div class="col-75">75%</div>
<div class="col-80">80%</div>
<div class="col-90">90%</div>
<div class="col-100">100%</div>

<div class="col-l-50">50% at max-width 1200px</div>
<div class="col-m-50">50% at max-width 992px</div>
<div class="col-s-50">50% at max-width 768px</div>
<div class="col-xs-50">50% at max-width 480px</div>

<div class="col-order-1">Set col order to 1</div>
<div class="col-m-order-3">Set col order to 3 at max-width 992px</div>
<div class="col-s-order-5">Set col order to 5 at max-width 768px</div>

Nesting Rows

<div class="container">
    <div class="row">
        <div class="col-70">
            <div class="row">
                <div class="col-50">
                    Nested 50% of parent
                </div>
                <div class="col-50">
                    Nested 50% of parent
                </div>
            </div>
        </div>
    </div>
</div>