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
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


<!DOCTYPE html>
  <title>Jquery Mobile</title>
  <script src = ""></script>
  <script src=""></script>
  <link rel="stylesheet" href="">

  <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 data-role="footer" data-position="fixed"><h2>Home footer</h2></div>


Grid layout for two columns


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

Grid layout for three columns


<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>

Grid layout for four columns


<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>

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