O'Reilly logo

jQuery and JavaScript Phrasebook by Brad Dayley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required