Applying a Grid Layout

<div class="ui-grid-a">   <div class="ui-block-a">Row 1 Column 1</div>   <div class="ui-block-b">Row 1 Column 2</div>   <div class="ui-block-a">Row 2 Column 1</div>   <div class="ui-block-b">Row 2 Column 2</div> </div>

One of the basic layouts provided by jQuery Mobile is the grid. The idea behind the grid layout is to split the page into equal-sized blocks, similar to an HTML table. You can then place content in those blocks, and they are automatically laid out correctly.

To add a grid layout, you need to add a <div class="ui-grid-#">, where # specifies the number of columns to include. The values are a (2 columns), b (3 columns), c (4 columns), and so on. For example, the following defines ...

Get jQuery and JavaScript Phrasebook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.