Ashwin Ashwin - 13 days ago 7
jQuery Question

How to create a grid with more than five columns jQuery Mobile?

jQuery Mobile documentation only explains up to a five-grid structure. If I want to create a 7-column grid, what should I do? (Column is not working well on mobiles). Please help me.

Thank you.

Answer

You can use 3rd party jQuery Mobile grid plugin: http://jeromeetienne.github.com/jquery-mobile-960/

It is only a css file but it works just fine. It can support more then 12 columns.

Example: http://jsfiddle.net/Gajotres/GGasc/

<fieldset class="container_12">
    <div class="grid_2"><button type="submit">Button 1</button></div>
    <div class="grid_2"><button type="submit">Button 2</button></div>      
    <div class="grid_2"><button type="submit">Button 3</button></div>      
    <div class="grid_2"><button type="submit">Button 4</button></div>
    <div class="grid_2"><button type="submit">Button 5</button></div>      
    <div class="grid_2"><button type="submit">Button 6</button></div>      
</fieldset>

EDIT :

Here's also a good example what this grid can do: http://jeromeetienne.github.com/jquery-mobile-960/demoFluid.html