jQuery Mobile: 3-column Grid B

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

Grid B is for 3-column block.

3-Column Grid
<!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 B</h1></div>
    <div class='ui-grid-b'>
            <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><!-- /grid-a -->

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


As you can see, just by using class=’ui-grid-b’, we have turned the page into a 3-column block system.

Series Navigation<< jQuery Mobile: Grid
jQuery Mobile: Arranging 2 Buttons using Grid-A >>

Leave a comment

Leave a Reply