❮ Event Pageload Jquerymobile List Views ❯

jQuery Mobile `Grid`

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 columnar layouts.

But sometimes you want to arrange smaller elements (like buttons or navigation tabs) side by side, as if in a table. In such cases, columnar layouts are recommended.

Columns in the grid are of equal width (totaling 100%), with no borders, backgrounds, margins, or padding.

Here are four layout grids available for use:

Grid Class	Columns	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

| | Within the column container, child elements have the class ui-block-a|b|c|d|e depending on the number of columns. Columns will float side by side. <br> <br> Example 1: For a class of ui-grid-a (two-column layout), you must specify two child elements with ui-block-a and ui-block-b. <br> <br> Example 2: For a class of ui-grid-b (three-column layout), you must add three child elements with ui-block-a, ui-block-b, and ui-block-c. | | --- | --- |

Custom Grid

By using CSS, you can customize the column blocks:

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>

You can also customize blocks using inline styles:

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

Multiple Rows

Multiple rows can also be included within columns.

Note: The ui-block-a class always creates a new row:

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>

Responsive Grid

On small screens, it is not recommended to have too many buttons side by side in one row (text will be shortened).

We use the ui-responsive class on the container to create a responsive grid:

Example

<div class="ui-grid-b ui-responsive">

❮ Event Pageload Jquerymobile List Views ❯