jQuery Mobile Tables

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile Grids

« Previous
Next Chapter »

## 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 four layout grids that can be used:

Grid Class | Columns | Column Widths | Corresponds To | Example
--- | --- | --- | --- | ---
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 »
« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE