jQuery Mobile Layout Grids
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.
Customize Grids
You can customize your column blocks by using CSS:
Example
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height:
100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
Try it Yourself »You can also customize your blocks by using inline styles:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
Multiple Rows
It is also possible to have have multiple rows inside your columns.
Note: The ui-block-a-class will always create a new line:
Example
<div class="ui-grid-b">
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-c"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
</div>
Try it Yourself »Responsive Grids
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: