How to implement grid layouts with nested columns in jQuery Mobile

Question

With the help of code can i know How to implement grid layouts with nested columns in jQuery Mobile?

Answer 1

The most effective way to implement nested grid layouts is by using jQuery Mobile's built-in grid system with clear block hierarchy. Here's the precise implementation:

Nested Grid Solution

<!-- Outer 2-column grid -->

<div class="ui-grid-a">

  <!-- First main column -->

  <div class="ui-block-a">

    <div class="ui-bar ui-bar-a">Main Column 1</div>   

    <!-- Nested 3-column grid inside first column -->

    <div class="ui-grid-b">

      <div class="ui-block-a"><div class="ui-bar">Nested A</div></div>

      <div class="ui-block-b"><div class="ui-bar">Nested B</div></div>

      <div class="ui-block-c"><div class="ui-bar">Nested C</div></div>

    </div>

  </div>

 

  <!-- Second main column -->

  <div class="ui-block-b">

    <div class="ui-bar ui-bar-a">Main Column 2</div>

    <!-- Nested 2-column grid inside second column -->

    <div class="ui-grid-a">

      <div class="ui-block-a"><div class="ui-bar">Nested X</div></div>

      <div class="ui-block-b"><div class="ui-bar">Nested Y</div></div>

    </div>

  </div>

</div>