Search within TutorialsPark

jQuery Mobile : Grid Layouts


Learn how to use jQuery Mobile to create Grid Layouts.


jQuery Mobile: Creating Grid Layouts

jQuery Mobile provides some really useful CSS classes to create layouts in grid form. These layout can be creating using CSS styles but having them within the library is useful.

jQuery Mobile provides four types of grid classes, each of these types have different number of columns.

Table: jQuery Mobile - jQuery Mobile Layout Grid

CSS Class Columns
ui-grid-a 2
ui-grid-b 3
ui-grid-c 4
ui-grid-d 5

In the demo, we apply one of the grid classes to the main containers and then use grid classes to each of the content blocks.

Example: jQuery Mobile - Applying Themes

Give it a TRY! » Note: There are two grids, first one with three columns and second one with two columns


jQuery Mobile: Creating a Two Column Grid

In the demo below, we create a two-column(50%, 50%) grid , the outer grid is created using attribute ui-grid-a, within it there are two internal grids.

Syntax: jQuery Mobile Two Column Grid

Give it a TRY! » Note: The grids are flexible and will render responsively even on smaller displays


jQuery Mobile: Creating 3 Column Grid Layout

The Demo below, creates a three-column grid layout (33%, 33%, 33%), which is similar to a 2 column grid layout with an extra column.

Syntax: jQuery Mobile Creating three Column Grid Layout

Give it a TRY! » Note: The height and margin of the blocks is set using inline CSS rules.


jQuery Mobile: Creating a 4 column Grid Layout with Images

In the demo below, we create a 4 column grid layout (25%, 25%, 25%, 25%) with an image as a content within

Syntax: jQuery Mobile Creating a 4 column Grid Layout with Images

Give it a TRY! » Note: The height and margin of the blocks is set using inline CSS rules.