Grid Layout In Jquery Mobile

 

Today I will explain to you how to use Jquery Mobile Grid layout, which allows to build multiple columns ranges between two to five columns  .

We need this technique to place small elements side-by-side (like hours, minutes and seconds text box groups).

Jquery mobile provides a block style class called ui-grid, this class is the core of grid layout. It is 100% width, with no borders or backgrounds, and without padding or margins.

To build two columns layout, we can use ui-grid-a. The others can be used as the following:

class                               

Layout

Width

 ui-grid-a

Two-column

50/50%

ui-grid-b

Three-column

33/33/33%

ui-grid-c

Four-column

25/25/25/25%

ui-grid-d

Five-column

20/20/20/20/20%

 

For example, we can use ui-grid-a as the following:

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

 

</div>

 

Inside this two-column layout, we can place the two columns.

 <div class="ui-grid-a">
              <div class="ui-block-a">
                  Left Block</div>
              <div class="ui-block-b">
                  Right Block
              </div>
 </div>

 

 

 

 

 

 

Ui-block-a class says: this is the first column in the grid, and ui-block–b is the second one in the same grid.

 

 

 


 

Here you can find that ui-block changes the CSS Clear property to the left. This property specifies the left side of the element, where other floating elements are not allowed.

Furthermore, you can give that block a style by using ui-bar class by default without having any style. You can also assign any style to the block (like height, background, etc):

 

   <div class="ui-grid-a">
              <div class="ui-block-a">
                 <div class="ui-bar ui-bar-b">Left Block</div> 
                  </div>
              <div class="ui-block-c">
                 <div class="ui-bar ui-bar-b">Right Block</div> 
              </div>
  </div>

 

The layout would be like this:

 


 

 

 

 

 

 

Apply Grid to Content Container:

 

Grid classes can be applied to any container. In the previous example, I used it with Fieldset and applied the block to the two buttons.

          <fieldset class="ui-grid-a">
              <div class="ui-block-a">
                  <button type="button" data-theme="b">Add</button></div>
              <div class="ui-block-b">
                  <button type="button" data-theme="e">Delete</button></div>
          </fieldset>

 


 

 

You will find that every block -div- is stretched to 50% of the screen width.
 
In the same way, we can create a three-column layout for time entry:
 
   <fieldset class="ui-grid-b">
              
              <div class="ui-block-a">
              <label id="Label10" for="txtHours">
                        Time</label></div>
              <div class="ui-block-b">
                 <input type="text" name="txtHours" id="txtHours" value="12" style="width:40px"  maxlength="2" /> </div>
                        
              <div class="ui-block-c">
                <input type="text" name="txtMinutes" id="txtMinutes" value="00" style="width:40px"   maxlength="2" /></div>
          </fieldset>

 

 

 


 

 

 
The letters sequence after ui-block class refers to the column number. So, “a" refers to the fist column, "b" to the second one, and so on. In this way we can create multiple rows of items.

There is an important thing by using multiple rows of items. ui-block-a CSS Class is used to  clear the floats and start a new line. Therefore the sequence is important to build the items.

Here you can find an example of multiple rows of items:

 

       <div data-role="content">
            <fieldset class="ui-grid-b">
                <div class="ui-block-a">
                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                </div>
                <div class="ui-block-b">
                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                </div>
                <div class="ui-block-c">
                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                </div>
                <div class="ui-block-a">
                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                </div>
                <div class="ui-block-b">
                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                </div>
                <div class="ui-block-a">
                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                </div>
            </fieldset>

 

 

The layout would be like this:

 


 

 

 

Note that how a new line is started in the third line by using  ui-block-a CSS Class.

 

 Hope that helps.

 

 

 

 

 

Published Monday, July 11, 2011 3:43 PM by Yousef_Jadallah
Filed under: , ,

Comments

# re: Grid Layout In Jquery Mobile

Monday, August 15, 2011 12:22 AM by Prashanth

Thank you very much very useful

# re: Grid Layout In Jquery Mobile

Thursday, September 15, 2011 10:28 AM by Nirbhay

Thanks for gr8 article, I have one question for you can we merge two columns into one ?

# re: Grid Layout In Jquery Mobile

Thursday, September 15, 2011 4:43 PM by Yousef_Jadallah

Dear Nirbhay,

You can control the design as you want, for an instance :

 <div data-role="page">

       <div data-role="content">

           <fieldset class="ui-grid-a" data-theme="b">

               <div class="ui-block-a" style="width:50%">

                   <button type="button">test</button>

               </div>

               <div class="ui-block-b" style="width:50%">

                   <button type="button">test</button>

               </div>

                 <div class="ui-block-a" style="width:100%">

                   <button type="button">test</button>

               </div>

                   <div class="ui-block-a" style="width:50%">

                   <button type="button">test</button>

               </div>

           </fieldset>

       </div>

   </div>

Or let me know the shape the you want to do!

Thanks.

# re: Grid Layout In Jquery Mobile

Tuesday, October 18, 2011 5:37 AM by mareet

thank you so much..really helped me a lot

# re: Grid Layout In Jquery Mobile

Thursday, November 24, 2011 7:29 AM by Kevin

thank you so much, this article helps a lot!!!

# re: Grid Layout In Jquery Mobile

Sunday, February 3, 2013 11:50 PM by uma

Very useful information. Thanks!

# re: Grid Layout In Jquery Mobile

Friday, August 16, 2013 3:50 AM by Vik

Thanks..good info

# re: Grid Layout In Jquery Mobile

Sunday, August 18, 2013 1:39 PM by ِAnas Al-Qudah

Nice article yousef

Thanks

Leave a Comment

(required) 
(required) 
(optional)
(required)