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.

jquery_mobile_layouts.htm

Kickstart Your Career

Get certified by completing the course

Advertisements