jQuery Mobile: 3-Column Grid with Buttons

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

Now that we know how to create a 3-column grid, let’s put some buttons inside the grids.

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>
    <fieldset class='ui-grid-b'>
        <div class='ui-block-a'><input type='button' value='Hmm'></div>
        <div class='ui-block-b'><input type='reset' value='No'></div>
        <div class='ui-block-c'><input type='submit' value='Yes'></div>

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

Grid classes can be applied to any container.

Here we are using fieldset tag to group together the buttons.

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

Leave a comment

Leave a Reply