How to create five-column grid in jQuery Mobile ?
Grids in jQuery Mobile are elements that have 100% width, are completely invisible having no borders, backgrounds, padding, or margins. Inside the grid container, the elements are assigned the classes with the names of ui-block-a/b/c/d/e. This makes each “block” element appear in the form of a grid by floating next to each other.
Creating a five-column grid: We can create a five-column grid by using the container classes as ui-block-a/b/c/d. All the column widths will be 20% each and occupy the full width of the screen. The below example will demonstrate this approach.
Example:
HTML
<!DOCTYPE html><html> <head> <link rel="stylesheet" href= <script src= </script></head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> </center> <h2>Five Column Grid </h2> <div class="ui-grid-d"> <div class="ui-block-a"> <div class="ui-bar ui-bar-a"> First Block </div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-a"> Second Block </div> </div> <div class="ui-block-c"> <div class="ui-bar ui-bar-a"> Third Block </div> </div> <div class="ui-block-d"> <div class="ui-bar ui-bar-a"> Fourth Block </div> </div> <div class="ui-block-e"> <div class="ui-bar ui-bar-a"> Fifth Block </div> </div> </div></body> </html> |
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Please Login to comment...