Grid Layout System in Jquery Mobile

We learn grid layout to fit out content well on any mobile/tablet screen in Jquery mobile. The classes are used for making a grid layout.

First, we will create a container for the row. And then this row will have columns. The number of columns we can create in a row depends on the row’s class value. Here are some value of container/row and the number of columns you can create in.

Class=”value”Number of Columns
class=”ui-grid-solo”1
class=”ui-grid-a”2
class=”ui-grid-b”3
class=”ui-grid-c”4
class=”ui-grid-d”5
class=”ui-grid-e”6
And so on…

For example, <div class="ui-grid-solo"></div> is the container or you can say row. You see class="ui-grid-solo" so that only one column can be created in it.

To create columns in row, we use class=”ui-block-a” for first column, class=”ui-block-b” for second column and so on.

We use DIV element whether we are creating container/row or column/block.

Grid layout for single column

Example-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery Mobile</title>
  <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
</head>
<body>


  <div data-role="page" id="home">
    <div data-role="header" data-position="fixed"><h1>Jaischool</h1></div>
    <div data-role="main" class="ui-content">
    
        <div class="ui-grid-solo">
          <div class="ui-block-a">
            <button>Single Column</button>
          </div>
        </div>

    </div>
    <div data-role="footer" data-position="fixed"><h2>Home footer</h2></div>
  </div>

</body>
</html>

Grid layout for two columns

Example:-

<div class="ui-grid-a">
          <div class="ui-block-a"><button>First</button></div>
          <div class="ui-block-b"><button>Second</button></div>
</div>

Grid layout for three columns

Example~

<div class="ui-grid-b">
          <div class="ui-block-a"><button>First</button></div>
          <div class="ui-block-b"><button>Second</button></div>
          <div class="ui-block-c"><button>Third</button></div>
</div>

Grid layout for four columns

Example-

<div class="ui-grid-c">
          <div class="ui-block-a"><button class="ui-btn ui-icon-home ui-btn-icon-notext">One</button></div>
          <div class="ui-block-b"><button class="ui-btn ui-icon-home ui-btn-icon-notext">Two</button></div>
          <div class="ui-block-c"><button class="ui-btn ui-icon-home ui-btn-icon-notext">Three</button></div>
          <div class="ui-block-d"><button class="ui-btn ui-icon-home ui-btn-icon-notext">Four</button></div>
</div>

Note*** When you have a container for two columns and add three columns then the third column will break the line. This method is not wrong, you can use it.

Leave a Comment