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-solo | 1 | 100% | ui-block-a | Try it |
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: