jQuery Mobile Grids
jQuery Mobile Grid Layout
jQuery Mobile provides a set of CSS-based column layouts. However, on mobile devices, due to the narrow screen width of phones, it is generally not recommended to use multi-column layouts.
But sometimes you want to place smaller elements (such as buttons or navigation tabs) side by side, as if in a table. In such cases, using a column layout is recommended.
The columns in a grid are equal in width (totaling 100%), with no borders, background, margin, or padding.
There are four layout grids available:
| Grid Class | Column | Column Width | 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 |
 |
Inside the column container, child elements have classes of ui-block-a|b|c|d|e depending on the number of columns. The columns will float side by side. Example 1:With class ui-grid-a (two-column layout), you must specify two child elements, ui-block-a and ui-block-b. Example 2:With class ui-grid-b (three-column layout), you must add three child elements: ui-block-a, ui-block-b, and ui-block-c. |
|---|
Custom Grids
By using CSS, you can customize column blocks:
Examples
.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 »
You can also customize blocks by using inline styles:
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
Multiple Rows
There can also be multiple rows in columns.
Note:The ui-block-a class always creates a new row:
Examples
<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 »
Responsive Grids
On small screens, it is not recommended to place too many buttons side by side in one row (text will be shortened).
We use the ui-responsive class on the container to create responsive grids:
Other Extensions