- jQuery Mobile - Home
- jQuery Mobile - Overview
- jQuery Mobile - Setup
- jQuery Mobile - Pages
- jQuery Mobile - Icons
- jQuery Mobile - Transitions
- jQuery Mobile - Layouts
- jQuery Mobile - Widgets
- jQuery Mobile - Events
- jQuery Mobile - Forms
- jQuery Mobile - Themes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Data Attributes
jQuery Mobile - Grid Layouts
jQuery mobile grid system creates page layouts through a series of rows and columns.
Following table demonstrates the types of grid in detail.
| Sr.No. | Type & Description |
|---|---|
| 1 |
Basic grids
Include ui-grid-solo class in <div> to create a single column grid, the grid width is 100% |
| 2 |
Two column grids
Add class ui-grid-a to a <div> and include two child container with class ui-block-a and ui-block-b to create two column layout. |
| 3 |
Three-column grids The ui-grid-b class is used to create a three column grid, it includes three child container with class ui-block-a/b/c. |
| 4 |
Four-column grids
The ui-grid-c class is used to create a four column grid, it includes four child container with class ui-block-a/b/c/d/e. |
| 5 |
Five-column grids
The ui-grid-d class is used to create a five column grid, it includes five child container with class ui-block-a/b/c/d. |
| 6 |
Multiple row grids
Multiple rows can be wrapped in the grid by specifying any column class on a container. |
| 7 |
Grid solo class
The standard grid is made responsive by overiding the grid styles below a single breakpoint. |
| 8 |
Responsive grids
The stack grids below 35em (560px), a preset breakpoint can be applied. |
| 9 |
Breakpoint preset
The stack grids below 35em (560px), a preset breakpoint can be applied. In grid container, include .ui-responsive class. |