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

Question

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 1

I needed a jquery mobile 7 column grid as well (for calendar project)

I extended the CSS to handle the extra grid and block styles for 6 and 7 columns based on how the CSS was handling the 2-5 columns. The only difference is the width and additional blocks that are created.

Anyway, use this CSS to extend the existing jquery mobile CSS

/* ADD 6(e) and 7(f) column grid */
.ui-grid-e, .ui-grid-f { overflow: hidden; }

/* grid e: 16/16/16/16/16/16 */
.ui-grid-e .ui-block-a, .ui-grid-e .ui-block-b, .ui-grid-e .ui-block-c, .ui-grid-e .ui-block-d, .ui-grid-e .ui-block-e, .ui-grid-e .ui-block-f { width: 16.59166666666667%; }
.ui-grid-e > :nth-child(n) { width: 16.66666666666667%; }
.ui-grid-e .ui-block-a { clear: left; }

/* grid f: 14/14/14/14/14 */
.ui-grid-f .ui-block-a, .ui-grid-f .ui-block-b, .ui-grid-f .ui-block-c, .ui-grid-f .ui-block-d, .ui-grid-f .ui-block-e, .ui-grid-f .ui-block-f, .ui-grid-f .ui-block-g { width: 14.21071428571429%; }
.ui-grid-f > :nth-child(n) { width: 14.28571428571429%; }
.ui-grid-f .ui-block-a { clear: left; }

/* ADD 6th (f) and 7th (g) blocks in grid */
.ui-header .ui-navbar .ui-grid-e li.ui-block-f .ui-btn,
.ui-footer .ui-navbar .ui-grid-e li.ui-block-f .ui-btn { margin-right: -3px; }/* NOT TESTED */

.ui-header .ui-navbar .ui-grid-f li.ui-block-g .ui-btn,
.ui-footer .ui-navbar .ui-grid-f li.ui-block-g .ui-btn { margin-right: -2px; }/* NOT TESTED */

.ui-grid-e .ui-btn, .ui-grid-f .ui-btn { margin-right: 5px; margin-left: 5px; }

.ui-block-f, .ui-block-g { margin: 0; padding: 0; border: 0; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

.ui-header .ui-navbar .ui-grid-e li.ui-block-f .ui-btn-icon-right .ui-icon,
.ui-footer .ui-navbar .ui-grid-f li.ui-block-g .ui-btn-icon-right .ui-icon { right: 8px; }

Notice you are creating styles for : .ui-grid-e (6 column grid) .ui-grid-f (7 column grid)

and the new blocks in those grids are : .ui-block-f (6th block) .ui-block-g (7th block)

So, the base HTML to create a 7 column grid would be:

<div class="ui-grid-f">
    <div class="ui-block-a"><div class="ui-body ui-body-d">1</div></div>
    <div class="ui-block-b"><div class="ui-body ui-body-d">2</div></div>
    <div class="ui-block-c"><div class="ui-body ui-body-d">3</div></div>
    <div class="ui-block-d"><div class="ui-body ui-body-d">4</div></div>
    <div class="ui-block-e"><div class="ui-body ui-body-d">5</div></div>
    <div class="ui-block-f"><div class="ui-body ui-body-d">6</div></div>
    <div class="ui-block-g"><div class="ui-body ui-body-d">7</div></div>
</div>

Answer 2

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