Grid system

by Annett

HTML

<link rel="stylesheet" href="http://csswizardry.com/inuitcss/inuit.min.css">
<h1>Regular grids</h1>

<div class=gw>
    
    <div class="g  one-whole">
        <p class=demo-block>Foo</p>
    </div>
    
    
    
    <div class="g  one-half">
        <p class=demo-block>Foo</p>
    </div>
    
    <div class="g  one-quarter">
        <p class=demo-block>Bar</p>
    </div>
    
    <div class="g  one-quarter">
        <p class=demo-block>Baz</p>
    </div>
    
    
    
    <div class="g  one-third">
        <p class=demo-block>Foo</p>
    </div>
    
    <div class="g  two-thirds">
        <p class=demo-block>Bar</p>
    </div>
    
    
    
    <div class="g  one-half">
        <p class=demo-block>Foo</p>
    </div>
    
    <!-- Nesting -->
    <div class="g  one-half">
        
        <div class=gw>
            
            <div class="g  one-half">
                <p class=demo-block>Foo</p>
            </div>
            
            <div class="g  one-half">
                <p class=demo-block>Bar</p>
            </div>
            
        </div>
        
    </div>
    
    
    
    <div class="g  one-whole">
        <p class=demo-block>Foo</p>
    </div>
    
</div>


<h2 class=alpha>Reversed grids</h2>

<div class="gw  gw--rev">
    
    <div class="g  one-third">
        <p class=demo-block>Foo</p>
    </div>
    
    <div class="g  two-thirds">
        <p class=demo-block>Bar</p>
    </div>

</div>

<h2 class=alpha>Push classes</h2>

<div class=gw>
    
    <div class="g  one-third  push--one-third">
        <p class=demo-block>Foo</p>
    </div>

</div>

CSS

/**
 * These demo styles sit on top of inuit.css
 * github.com/csswizardry/inuit.css/blob/master/inuit.css/partials/objects/_grids.scss
 */

html{
    font:1em/1.5 Georgia, serif;
    padding:5%;
    background-color:#fff;
    color:#333;
}
.demo-block{
    padding:0.5em;
    background-color:#4a8ec2;
    color:#fff;
    border-radius:4px;
}