O'Reilly logo

jQuery Mobile Web Development Essentials Second Edition by Andy Matthews, Raymond Camden

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

Laying out content with grids

Grids are one of the few features of jQuery Mobile that do not make use of particular data attributes. Instead, you work with grids simply by specifying CSS classes for your content.

Grids come in four flavors: two-column, three-column, four-column, and five-column. (You will probably not want to use the five-column grid on a mobile phone device. Save that for a tablet instead.)

You begin a grid with a div block that makes use of the ui-grid-X class, where X will be either a, b, c, or d. ui-grid-a represents a two-column grid, whereas ui-grid-b is a three-column grid. You can probably guess what c and d create.

So to begin a two-column grid, you would wrap your content with the following:

<div class="ui-grid-a"> Content ...

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