jQuery Mobile: 4-Column Grid-C

This entry is part 39 of 73 in the series jQuery Mobile

When designing an interface for a tablet, you might need a 4-column grid.

The 25/25/25/25% grid is created by specifying class=ui-grid-c on the parent and adding a fourth block.

<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
<div data-role='page'>
    <div data-role='header'><h1>Grid C</h1></div>
    <div class='ui-grid-c'>
        <div class='ui-block-a'><div class='ui-bar ui-bar-a' style='height:60px'>Block A</div></div>
        <div class='ui-block-b'><div class='ui-bar ui-bar-a' style='height:60px'>Block B</div></div>
        <div class='ui-block-c'><div class='ui-bar ui-bar-a' style='height:60px'>Block C</div></div>
        <div class='ui-block-d'><div class='ui-bar ui-bar-a' style='height:60px'>Block D</div></div>
    </div><!-- /grid-c -->

    <div data-role='footer' data-position='fixed'>
Try The Code

jQuery Mobile also supports 5-column grid.  This is done by using class=ui-grid-d.

Series Navigation<< jQuery Mobile: 3-Column Grid with Buttons
jQuery Mobile: Multiple Row Grids >>

Leave a comment

Leave a Reply