Responsive grids

by Umar

HTML

<link rel="stylesheet" href="http://inuitcss.com/inuit.min.css">
<div class="grid">
    
    <div class="grid__item  one-whole">
        <p class=demo-block>Foo</p>
    </div><!--
    
 --><div class="grid__item  one-third  lap-one-third  palm-one-whole">
        <p class=demo-block>Foo</p>
    </div><!--
    
 --><div class="grid__item  one-third  lap-two-thirds  palm-one-whole">
        <p class=demo-block>Foo</p>
    </div><!--
    
 --><div class="grid__item  one-third  lap-one-half  palm-one-whole">
        <p class=demo-block>Foo</p>
    </div><!--
    
 --><div class="grid__item  one-quarter  lap-one-half  palm-one-whole">
        <p class=demo-block>Foo</p>
    </div><!--
    
 --><div class="grid__item  one-quarter  lap-one-half  palm-one-whole">
        <p class=demo-block>Foo</p>
    </div><!--
    
 --><div class="grid__item  one-half  lap-one-half  palm-one-whole">
        <p class=demo-block>Foo</p>
    </div><!--
    
 --><div class="grid__item  one-whole">
        <p class=demo-block>Foo</p>
    </div><!--
    
 --><div class="grid__item  one-third  lap-one-half  palm-one-whole">
        <p class=demo-block>Foo</p>
    </div><!--
    
 --><div class="grid__item  one-third  lap-one-half  palm-one-whole">
        <p class=demo-block>Foo</p>
    </div><!--
    
 --><div class="grid__item  one-third  lap-one-half  palm-one-whole">
        <p class=demo-block>Foo</p>
    </div><!--
    
 --><div class="grid__item  one-whole  lap-one-half">
        <p class=demo-block>Foo</p>
    </div>
    
</div>

CSS

</style>

<meta name=viewport content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

<style>
/**
 * These demo styles sit on top of inuit.css
 * github.com/csswizardry/inuit.css/blob/master/inuit.css/generic/_widths.scss#L98
 */

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















*{
    -webkit-transition:0.2s width;
       -moz-transition:0.2s width;
            transition:0.2s width;
}