From the course: jQuery Mobile Essential Training

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Using layout grids

Using layout grids - jQuery Mobile Tutorial

From the course: jQuery Mobile Essential Training

Start my 1-month free trial

Using layout grids

“

So far we've seen how jQuery Mobile provides a set of high level constructs, such as form controls and toolbars for building highly polished and nice looking mobile web app layouts. But there's some low level tools that you can use as well, and layout grids is one of them. Which is what we're going to examine here. jQuery Mobile provides a set of layout grids that are from 2 to 5 columns that you can use to layout your content in the page. And they are based on a nested structure, and any container, such as a div or anything else, can serve as a root for one of these grids. So what you would do is something like this. Suppose I had this div, what I would do is apply a CSS class in this case ui-grid-a, and this is the two column layout, and then once I have that set on the div, I can include other containers inside that div. In this case, I've got two other divs one of which is ui-block-a and ui-block-b and those define the columns inside the grid. Each one of those is going to take up…

Contents