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 =
< script src =
</ 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 =
< script src =
</ 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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...