jQuery Mobile provides a set of CSS-based column layouts. However, column layouts are not generally recommended on a mobile device, due to the mobile's screen width.
But there are times you want to position smaller elements, like buttons or navigation tabs, side-by-side as if it was in a table. Then, columns are perfect.
Columns in a grid are of equal width (and 100% wide in total), with no border, background, margin or padding.
There are five layout grids that can be used:
|Grid Class||Columns||Column Widths||Corresponds To||Example|
|ui-grid-a||2||50% / 50%||ui-block-a|b||Try it|
|ui-grid-b||3||33% / 33% / 33%||ui-block-a|b|c||Try it|
|ui-grid-c||4||25% / 25% / 25% / 25%||ui-block-a|b|c|d||Try it|
|ui-grid-d||5||20% / 20% / 20% / 20% / 20%||ui-block-a|b|c|d|e||Try it|
|Within the column container, child elements can have the class
ui-block-a|b|c|d|e, depending on the number of columns. The columns will float side-by-side.
Example 1: For the ui-grid-a class (which is a two-column layout), you must specify two child elements of ui-block-a and ui-block-b.
Example 2: For ui-grid-b (three-column layout), add three child elements of ui-block-a, ui-block-b and ui-block-c.
You can customize your column blocks by using CSS:
You can also customize your blocks by using inline styles:
It is also possible to have have multiple rows inside your columns.
Note: The ui-block-a-class will always create a new line:
On small screens, it is not recommended to have too many buttons with text side-by-side on one row - as the text might get shortened.
For responsive grids, add the ui-responsive class to the container: