Latest web development tutorials
 

jQuery Mobile Grids


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:

Example

<div class="ui-grid-b ui-responsive">
Try it Yourself »