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.