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


5 responses to “How to use jQuery Mobile Grid Layout”

  1. Toaster says:

    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. Cathy B says:

    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.

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

  4. […] 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 […]

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get actionable training and tech advice

We'll email you our latest articles up to once per week.