iron-container is not strictly part of iron-grid but is important in laying out content. It allows you to center your page content. iron-container's default is set to ~90% of the window width. It helps you center and contain your page content. We use the container to contain our body content.

The following custom proporties are available for styling:

iron-grid helps you layout your page in an ordered, easy fashion. We are using a standard 12 column fluid responsive grid system.

Please note that all the examples pictured below have the class 'example' on them. The class is included in the component. This class gives each grid column a 1px white border so that you can see the seperation.

Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.

To get a feel of how the grid is used in HTML. Take a look at this code below which will produce a similar result as the one above.

<iron-grid>
    <div class="s1">1</div>
    <div class="s1">2</div>
    <div class="s1">3</div>
    <div class="s1">4</div>
    <div class="s1">5</div>
    <div class="s1">6</div>
    <div class="s1">7</div>
    <div class="s1">8</div>
    <div class="s1">9</div>
    <div class="s1">10</div>
    <div class="s1">11</div>
    <div class="s1">12</div>
</iron-grid>

To offset, simply add offset-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.

<iron-grid>
    <div class="s12">
        <span>This div is 12-columns wide on all screen sizes</span>
    </div>
    <div class="s6 offset-s6">
        <span>6-columns (offset-by-6)</span>
    </div>
</iron-grid>

Above we showed you how to layout elements using our grid system. Now we'll show you how to design your layouts so that they look great on all screen sizes.

In the previous examples, we only defined the size for small screens using "col s12". This is fine if we want a fixed layout since the rules propogate upwards. By just saying s12, we are essentially saying "col s12 m12 l12". But by explicitly defining the size we can make our website more responsive.

<iron-grid>
    <div class="s12">
        <span>I am always full-width (col s12)</span>
    </div>
    <div class="s12 m6">
        <span>I am full-width on mobile (col s12 m6)</span>
    </div>
</iron-grid>