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.
There are four preset configurations layouts that can be used in any situation that requires columns:
+ui-grid-a class)ui-grid-b class)ui-grid-c class)ui-grid-d class)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.
+Within the grid container, child elements are assigned ui-block-a/b/c/d in a sequential manner which makes each "block" element float side-by-side, forming the grid. The ui-block-a class essentially clears the floats which will start a new line (see multiple row grids, below).
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:
Grids are helpful for creating layouts within a toolbar. Here's a footer with a 3 column grid.
+ + + +