Layout grids

Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example).

The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called ui-grid.

There are two preset configurations layouts — two-column (using the class of ui-grid-a), and three-column (using the class of ui-grid-b) — that can be used in any situation that requires columns. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.

Two column grids

To build a two-column (50/50%) layout, start with a container with a class of ui-grid-a, and add two child containers inside it classed with ui-block-a for the first column and ui-block-b for the second:


<div class="ui-grid-a">
	<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
	<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

The above markup produces the following content layout:

I'm Block A and text inside will wrap.
I'm Block B and text inside will wrap.

As you see above, by default grid blocks have no styles for appearance; they simply present content side-by-side.

Grid classes can be applied to any container. In this next example, we add ui-grid-a to a fieldset, and apply the ui-block classes to the two buttons inside to stretch them each to 50% of the screen width:


<fieldset class="ui-grid-a">
	<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
	<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
</fieldset>

And, grid blocks can adopt presentation styles from the theming system — by adding a height and color swatch reference to the grid blocks, we can achieve this style appearance:

Block A
Block B

Three-column grids

The other grid layout configuration uses class=ui-grid-b on the parent, and 3 child container elements, each with its respective ui-block-a/b/c class, to create a three-column layout (33/33/33%).


<div class="ui-grid-a">
	<div class="ui-block-a">Block A</div>
	<div class="ui-block-b">Block B</div>
	<div class="ui-block-c">Block C</div>
</div><!-- /grid-a -->

This will produce a 33/33/33% grid for our content.

Block A
Block B
Block C

And an example of a 3 column grid with buttons inside: