Uneven Grids

Description

To customize the column dimensions we can adjust the widths in CSS.

For instance, we can modify the default widths in our 2-column grid to a 25/75% grid by setting the custom width of each block.

Example


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<style>
/* Original 2-column grid set to 50/50% 
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b {
    width: 50%;<!--from  ww  w . ja v a  2  s .c o  m-->
}*/

/* Set 2-column grid to 25/75% */
.ui-grid-a .ui-block-a {
  width: 25%;
}

.ui-grid-a .ui-block-b {
  width: 75%;
}

/* Set 3-column grid to 25/50/25% */
.ui-grid-b .ui-block-a {
  width: 25%;
}

.ui-grid-b .ui-block-b {
  width: 50%;
}

.ui-grid-b .ui-block-c {
  width: 25%;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>

  <div data-role="page" id="home">
    <div data-role="header">
      <h1>Uneven Grids</h1>
    </div>

    <div data-role="content">
      <div class="ui-grid-a">
        <div class="ui-block-a">
          <div class="ui-bar ui-bar-e"
            style="text-align: center; height: 100px;">25%</div>
        </div>
        <div class="ui-block-b">
          <div class="ui-bar ui-bar-e"
            style="text-align: center; height: 100px;">75%</div>
        </div>
      </div>
      <div class="ui-grid-b">
        <div class="ui-block-a">
          <div class="ui-bar ui-bar-e"
            style="text-align: center; height: 100px;">25%</div>
        </div>
        <div class="ui-block-b">
          <div class="ui-bar ui-bar-e"
            style="text-align: center; height: 100px;">50%</div>
        </div>
        <div class="ui-block-c">
          <div class="ui-bar ui-bar-e"
            style="text-align: center; height: 100px;">25%</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Click to view the demo





















Home »
  jQuery Mobile »
    Tutorial »




jQuery_Mobile
Form
List
Layout
Theme