In this article by Raymond Camden, author of the book jQuery Mobile Web Development Essentials – Third Edition, we will look at dialogs, grids, and other widgets. While jQuery mobile provides great support for them, you get even more UI controls within the framework.

In this article, we will see how to layout content with grids and make responsive grids.

(For more resources related to this topic, see here.)

Laying out content with grids

Grids are one of the few features of jQuery mobile that do not make use of particular data attributes. Instead, you work with grids simply by specifying CSS classes for your content.

Grids come in four flavors: two-column, three-column, four-column, and five-column grids. You will probably not want to use the five-column one on a phone device. Save that for a tablet instead.

You begin a grid with a div block that makes use of the class ui-grid-X, where X will either be a, b, c, or d. ui-grid-a represents a two-column grid. The ui-grid-b class is a three-column grid. You can probably guess what c and d create.

So, to begin a two-column grid, you would wrap your content with the following:

<div class="ui-grid-a">

  Content

</div>

Within the div tag, you then use div for each cell of the content. The class for grid calls begins with ui-block-X, where X goes from a to d. The ui-block-a class would be used for the first cell, ui-block-b for the next, and so on. This works much like the HTML tables.

Putting it together, the following code snippet demonstrates a simple two-column grid with two cells of content:

<div class="ui-grid-a">

  <div class="ui-block-a">Left</div>

  <div class="ui-block-b">Right</div>

</div>

The text within a cell will automatically wrap. Listing 7-1 demonstrates a simple grid with a large amount of text in one of the columns:

 

In the mobile browser, you can clearly see the two columns:



If the text in these divs seems a bit close together, there is a simple fix for that. In order to add a bit more space between the content of the grid cells, you can add a class to your main div that specifies ui-content. This tells jQuery mobile to pad the content a bit. For example:

<div class="ui-grid-a ui-content">

This small change modifies the previous screenshot like the following:

Listing 7-1: test1.html

<div data-role="page" id="first">

      <div data-role="header">

        <h1>Grid Test</h1>

      </div>

      <div role="main" class="ui-content">

        <div class="ui-grid-a">

          <div class="ui-block-a">

          <p>

          This is my left hand content. There won't be a lot of 
          it.

          </p>

          </div>

          <div class="ui-block-b">

            <p>

              This is my right hand content. I'm going to fill it 
              with some dummy text.

            </p>

            <p>

              Bacon ipsum dolor sit amet andouille capicola spare 
              ribs, short loin venison sausage prosciutto 
              turkey flank frankfurter pork belly short ribs. 
              chop, pancetta turkey bacon short ribs ham flank 
              pork belly. Tongue strip steak short ribs tail

          </p>

          </div>

        </div>

      </div>

    </div>

Working with other types of grids then is simply a matter of switching to the other classes. For example, a four-column grid would be set up similar to the following code snippet:

<div class="ui-grid-c">

  <div class="ui-block-a">1st cell</div>

  <div class="ui-block-b">2nd cell</div>

  <div class="ui-block-c">3rd cell</div>

</div>

Again, keep in mind your target audience. Anything over two columns may be too thin on a mobile phone.

To create multiple rows in a grid, you need to simply repeat the blocks. The following code snippet demonstrates a simple example of a grid with two rows of cells:

<div class="ui-grid-a">

  <div class="ui-block-a">Left Top</div>

  <div class="ui-block-b">Right Top</div>

  <div class="ui-block-a">Left Bottom</div>

  <div class="ui-block-b">Right Bottom</div>

</div>

Notice that there isn't any concept of a row. jQuery mobile handles knowing that it should create a new row when the block starts over with the one marked ui-block-a. The following code snippet, Listing 7-2, is a simple example:

Listing 7-2:test2.html

<div data-role="page" id="first">

      <div data-role="header">

        <h1>Grid Test</h1>

      </div>

      <div role="main" class="ui-content">

        <div class="ui-grid-a">

          <div class="ui-block-a">

            <p>

              <img src="ray.png">

            </p>

          </div>

          <div class="ui-block-b">

          <p>

          This is Raymond Camden. Here is some text about him. It 
          may wrap or it may not but jQuery Mobile will make it 
         look good. Unlike Ray!

          </p>

          </div>

          <div class="ui-block-a">

            <p>

              This is Scott Stroz. Scott Stroz is a guy who plays 
              golf and is really good at FPS video games.

            </p>

          </div>

          <div class="ui-block-b">

            <p>

              <img src="scott.png">

            </p>

          </div>

        </div>

      </div>

    </div>

The following screenshot shows the result:

Making responsive grids

Earlier we mentioned that complex grids may not work depending on the size or your targeted devices. A simple two-column grid is fine, but the larger grids would render well on tablets only. Luckily, there's a simple solution for it. jQuery mobile's latest updates include much better support for responsive design. Let's consider a simple example. Here is a screenshot of a web page using a four-column grid:



It is readable for sure, but it is a bit dense. By making use of responsive design, we could handle the different sizes intelligently using the same basic HTML. jQuery mobile enables a simple solution for this by adding the class ui-responsive to an existing grid. Here is an example:

<div class="ui-grid-c ui-responsive">

By making this one small change, look how the phone version of our page changes:



The four-column layout now is a one-column layout instead. If viewed in a tablet, the original four-column design will be preserved.

Summary

In this article, you learned more about how jQuery mobile enhances basic HTML to provide additional layout controls to our mobile pages. With grids, you learned a new way to easily layout content in columns.

Resources for Article:

• Classes and Instances of Ember Object Model [article]
• Introduction to Akka [article]
• CoreOS Networking and Flannel Internals [article]