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
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 ThemesGive 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 GridGive 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 LayoutGive 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