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 one on a phone device. Save it 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. The ui-grid-a class represents a two-column grid. The ui-grid-b class is a three-column grid. You can probably guess what c and d create.

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

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

Within the div tag, you then need to use div for each cell of the content. The class for grid calls begins with ui-block-X, where X goes from a to d. The ui-block-a class would be used for the first...