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 the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
