How to create two column grid and two column layout using jQuery Mobile ?

Last Updated : 02 Mar, 2022

jQuery Mobile provides CSS-based columns that are responsive. The grids have a width of 100%, grids do not have a background color, border, and padding.

The grids contain elements in them, these elements can be made float side-by-side using the ui-block-a or ui-block-b or ui-block-c or ui-block-d class. Columns in a grid are of equal width. In 2 column grid, both grid widths will be 50% each. For styling, we can use the ui-bar class.

CDN Links:

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css” />
<script src=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js”></script>

Approach:

Add the above CDN links to the HTML page.
In the body, create a div element with the class as ui-grid-a.
In div element, create two div elements with the class as ui-block-a for first div and class as ui-block-b for the second div.
Set the line-height of the body as 0.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
    <script src= 
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> 
    </script> 
  
    <style> 
        body { 
            line-height: 0 !important; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui-grid-a"> 
        <div class="ui-block-a"> 
            <div class="ui-bar ui-bar-a" style="height:50px"> 
                <p>Column 1</p> 
            </div> 
        </div> 
          
        <div class="ui-block-b"> 
            <div class="ui-bar ui-bar-b" style="height:50px"> 
                <p>Column 2</p> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: The following code demonstrates the submit and cancel buttons which are very common buttons in the internet world.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
  
    <script src= 
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> 
    </script> 
  
    <style> 
        fieldset { 
            border: 0; 
        } 
  
        .submit { 
            background-color: rgb(38, 134, 158); 
        } 
  
        .cancel { 
            background-color: rgb(233, 155, 10); 
        } 
    </style> 
</head> 
  
<body> 
    <fieldset class="ui-grid-a"> 
        <div class="ui-block-a"> 
            <a class="ui-btn cancel">CANCEL</a> 
        </div> 
  
        <div class="ui-block-b"> 
            <a class="ui-btn submit">SUBMIT</a> 
        </div> 
    </fieldset> 
</body> 
  
</html> 