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


Anthony James

Posts Twitter Facebook

Anthony is a Web Software Developer & Linux Systems Engineer. With 11 years of experience in these fields. He is also the founder and main contributor at Pinehead.tv. He is passionate about passing on his technical knowledge through training and educating others.

5 responses to How to use jQuery Mobile Grid Layout

  1. 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.

  2. Nice tutorial.

    However, you need to add the viewport meta tag to your base code as per http://jquerymobile.com/blog/2011/05/20/jquery-mobile-team-update-%E2%80%93-week-of-may-16th/#viewport 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 | Pinehead.tv - 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 jquerymobile.com source and grab the CSS [...]

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

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