jQuery Mobile Grid

jQuery Mobile Layout Grid

jQuery Mobile provides a set of column layout solutions based on CSS. However, it is generally not recommended to use column layouts on mobile devices due to the limited screen width of mobile devices.

However, there are times when you need to position smaller elements, such as buttons or navigation bars, side by side, like in a table. In such cases, column layout is very appropriate.

The columns in the grid are of equal width (total width is 100%), with no border, background, margin, or padding.

There are four types of layout grids available:

Grid Class Column Column Width Corresponding Example
ui-grid-a 2 50% / 50% ui-block-a|b Test
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Test
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Test
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Test

Tip:In the column container, depending on the number of columns, child elements can be set with the class ui-block-a|b|c|d|e. These columns will float side by side in order.

Example 1: For the ui-grid-a class (two-column layout), you must specify two child elements ui-block-a and ui-block-b.

Example 2: For the ui-grid-b class (three-column layout), please add three child elements ui-block-a, ui-block-b, and ui-block-c.

Customize Grid

You can customize the column blocks 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 the block 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 multiple rows in a column.

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