How to use jQuery Mobile Grid Layout

Anthony James —  June 21, 2011

In this screencast you will learn how to use jQuery Mobile’s new grid layout system. We will build grids using 2 column, all the way to 5 column layout. Grids can be a must when it comes to mobile design especially when designing for tablets such as the iPad.

Source File

Show us some love..Share on LinkedInShare on RedditTweet about this on TwitterShare on Google+Share on Facebook

Anthony James

Posts Twitter Facebook

5 responses to How to use jQuery Mobile Grid Layout


    Nice introduction, great site Anthony. Can you size the grids? Or are you tied into their predefined layouts? I ended up making my own column layout in style, but I would like to use their grid setup.


    Nice tutorial.

    However, you need to add the viewport meta tag to your base code as per or the page shows up very small on some phones.

Trackbacks and Pingbacks:

  1. 30 Content Management Tutorials | Jquery Radar - December 25, 2011

    [...] How to use jQueryMobile Grid Layout [...]

  2. Hack: Creating A Tablet Split View For jQuery Mobile | - February 10, 2012

    [...] create a split view. The closest solution allows you to create grids, which is what we covered in this screencast. In this screencast we are going to look at the source and grab the CSS [...]

  3. jQuery Mobile Development Guide | - August 20, 2012

    [...] How to use jQuery Mobile Grid Layout [...]