Grids

Contact Us or call 1-877-932-8228
Grids

Grids

Multicolumn layouts usually aren't a good idea on mobile devices' small screens, but there are times when you will need to display items in two, three, or more columns. Grid cells in jQuery Mobile have no color, no border, and no padding nor margin.

To lay out elements in a grid, wrap them in a container element (usually a div) with class ui-grid-a for two columns, ui-grid-b for three columns, etc. Each element inside the container gets a class ui-block-[a-z], with the a element (i.e., the element with class ui-block-a) at left, the b element next, etc.

Open WidgetsUI/Demos/grids/index.html in a mobile browser and in a file editor to view the code. This page show a two-column grid and a three-column grid - each with one row - and a four-column grid with two rows:

grids

Here's the code:

<h3>Two Columns</h3>
<div class="ui-grid-a">
	<div class="ui-block-a">Col 1</div>
	<div class="ui-block-b">Col 2</div>
</div>
<h3>Three Columns</h3>
<div class="ui-grid-b">
	<div class="ui-block-a">Col 1</div>
	<div class="ui-block-b">Col 2</div>
	<div class="ui-block-c">Col 3</div>
</div>
<h3>Four Columns</h3>
<div class="ui-grid-c">
	<div class="ui-block-a">Col 1,1</div>
	<div class="ui-block-b">Col 1,2</div>
	<div class="ui-block-c">Col 1,3</div>
	<div class="ui-block-d">Col 1,4</div>
	<div class="ui-block-a">Col 2,1</div>
	<div class="ui-block-b">Col 2,2</div>
	<div class="ui-block-c">Col 2,3</div>
	<div class="ui-block-d">Col 2,4</div>
</div>

Classes ui-grid-a, ui-grid-b, ui-grid-c set two-, three-, and four-column grid layouts. Note that, with the multirow layout for the four-column grid, the first element of the second row of elements starts over with class ui-block-a.

Next