O'Reilly logo

jQuery Mobile Web Development Essentials 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 on a phone device. Save that for a tablet instead.)

You begin a grid with a div block that makes use of the class ui-grid-X , where X will be either a, b, c, or d. ui-grid-a represents a two column grid. 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
</div>

Within the ...

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