Detailed explanation of the use of ui-grid grid layout in jQuery mobile page development_jquery

On mobile devices, the screen width is narrow, so multi-column layouts are not usually used, but sometimes you may need to arrange small elements (like buttons or side-by-side navigation labels, for example) in multiple columns. The Jquery Mobile framework provides a simple method to build a CSS-based column layout called ui-grid

Jquery Mobile provides four preset layouts, which can be used in any situation where columns are needed

• Two columns (using ui-grid-a class)
• Three columns (using ui-grid-b class)
• Four columns (using ui-grid-c class)
• Five columns (using ui-grid-d class)

Grids are 100% width, completely invisible (no borders or background) and have no margin or padding, so they don't interfere with the styling of elements placed inside them. In a grid container, child elements are assigned ui-block-a / b / c / d in a continuous manner, making each "block" element float and juxtapose, forming a grid. The ui-block-a class basically clears the float and will start a new row (see multi-row grid, below).

ui-grid-a two-column layout

Create a two-column (50 / 50%) layout. Add the ui-grid-a attribute to the first layer (parent container), and add ui-block-a and ui-block to the second layer (two sub-containers). -b：

<div class="ui-grid-a">
 <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
 <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

The above tag produces the following content layout:

As you can see, grids have no visual styling by default; they just render content side by side.

Grid classes can be applied to any container. In the next example, we add a ui-grid-a, apply ui-block, and both buttons extend to 50% of the screen width

<fieldset class="ui-grid-a">
 <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
 <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>  
</fieldset>

Please note that this framework adds left and right margin to the buttons in the grid. For a single button you can use class ui-grid-solo and button class ui-block-a, like the example below for a div. Such buttons will get the same margin

<div class="ui-grid-a">
 <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
 <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>  
</div>
<div class="ui-grid-solo">
 <div class="ui-block-a"><button type="v" data-theme="b">More</button></div>
</div>

Theme classes (without data theme attributes) from the theme system can be added to an element, including grids. In the following block, we added two classes: ui-bar to add the default bar and ui-bar-e to apply the background gradient and font style to the "E" toolbar theme sample. For illustration purposes, an inline style="height:120px" attribute is also added to each grid to set each standard height.

ui-block-b three-column layout

Grid layout configuration uses class=ui-grid-b on parent and 3 child container elements, each with its respective ui-block-a/a/c class, creating a one-row three-column layout (33/ 33/33%). Note: These blocks share the same style theme as the course, with the grid layout clearly visible.

<div class="ui-grid-b">
 <div class="ui-block-a">Block A</div>
 <div class="ui-block-b">Block B</div>
 <div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

This will produce a 33 / 33 / 33% grid layout for our content

ui-block-c four-column layout

A row of four columns, 25/25/25/25% grid, is achieved by specifying class=ui-grid-c in the parent container and adding quarter blocks. Note: These blocks have the same style of theme courses, the grid layout is clearly visible

ui-block-c five-column layout

One row and five columns, 20/20/20/20/20% grid, is specified by class= ui-grid-d
in the parent container

Multi-row and multi-column layout

Grid design wraps items in multiple rows. For example, if you specify a three-row, three-column grid (ui-grid-b) in a container that has nine sub-blocks, it will be swapped to 3 rows of 3 items each. Having a CSS rule clear for floats and starting a new line when class=ui-block-a is to ensure that a repeating sequence of assigned blocks (A,B,C,A,B,C,etc) maps to the grid type. You can set the first container of each row to class=ui-block-a to clear the float, so the classes of the 9 sub-containers should be: class=ui-block-(a,b,c,a,b,c, a,b,c).

<div id="grid" class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
</div>

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>grid-layout demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
 
<div data-role="page">
 <div data-role="header">
  <h1>Grid Layout Example</h1>
 </div>
 <div data-role="content">
  <div class="ui-grid-a">
   <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
   <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
  </div><!-- /grid-a -->
 </div>
</div>
 
</body>
</html>