Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create five-column grid in jQuery Mobile ?

  • Difficulty Level : Medium
  • Last Updated : 31 Oct, 2021

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!