Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

3. UI Components > Columns

Columns

jQuery Mobile offers us some templates to define content to be shown in columns, called layout grids. These grids act like a table without the semantic problem of using table (please, don’t use table for anything besides tabular data).

Warning

Remember that you are on a mobile device; columns should be used with care, only to place small elements such as buttons, links, or small items. If you are targeting tablets, you have more space for columns.

The layout grid method uses CSS classes to define grid areas and columns. We can define grids from two up to five columns. Each grid is invisible, uses the whole 100% width, and has no padding or margin defined.

To create a grid, just use a block container, typically a div, with a class of ui-grid-a for two columns, ui-grid-b for three columns, ui-grid-c for four columns and ui-grid-d for five columns. Every grid will divide, by default, the width into equal-width columns.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint