Grid Demo

by Prasad

HTML

<h3>Grid A (50/50)</h3>
<div class="ui-grid-a ui-responsive">
    <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
    <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
</div><!-- /grid-a -->
<h3>Grid B (33/33/33)</h3>
<div class="ui-grid-b ui-responsive">
    <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
    <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
    <div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
</div><!-- /grid-b -->
<h3>Grid C (25/25/25/25)</h3>
<div class="ui-grid-c ui-responsive">
    <div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
    <div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
    <div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
    <div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
</div><!-- /grid-c -->
<h3>Grid D (20/20/20/20/20)</h3>
<div class="ui-grid-d ui-responsive">
    <div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
    <div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
    <div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
    <div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
    <div class="ui-block-e"><div class="ui-body ui-body-d">E</div></div>
</div><!-- /grid-d -->