Barry's jQuery Mobile Demos: Grids

Grids

A grid is a special purpose widget that resembles a table with equal width rows and columns. Grids are not particular useful on mobile devices except where very small elements need to be arranged in a grid fashion. For example, a grid of icons or buttons may be useful.

A grid is defined first by the number of columns and then by adding elements to each column. Each column can have different numbers of elements but they arrange at equal heights. A grid is defined by a <div> tag with a class attribute having one of the following values.

Then inside the <div> tag we define each grid element with another <div> element with class attribute defined:

We can define multiple blocks which are placed in the specified column in the order they are declared. We can also add style attributes to <div> tags to be applied to elements or to the whole grid.

As an example, consider the following grid definition which places an uneven number of elements in each column of a three column grid.

<div class="ui-grid-b">
  <div class="ui-block-a"><span>AAA</span></div>
  <div class="ui-block-b"><span>BBB</span></div>
  <div class="ui-block-a"><span>AAA</span></div>
  <div class="ui-block-a"><span>AAA</span></div>
  <div class="ui-block-c"><span>CCC</span></div>
  <div class="ui-block-c"><span>CCC</span></div>
</div>

This grid would be displayed as three equal width columns as:

AAA
BBB
CCC
AAA
BBB
AAA

Notice how the first column has three elements because there are three elements declared with the ui-block-a value in the class field. However, be warned that some browsers have trouble with uneven numbered colums if they do not progress from taller to shorter columns. You can correct for this by inserting grid blank elements.

If you really want a grid with large elements you can make your grid responsive like the tables in the previous section by adding the ui-responsive value to the class attribute, e.g.

<div class="ui-grid-a ui-responsive">

The following grid is the same as the above one but with the value ui-responsive added to the class attribute to make it responsive.

AAA
BBB
CCC
AAA
BBB
AAA

Try adjusting the width of your window to see the change and compare it with the above grid.

Home