Author: Jesse Gumm (@jessegumm)

# Mobile Grid Element

Getting Started | API | Elements | Actions | Validators | Handlers | Configuration Options | About

## Table of Contents

- 1 Mobile Grid Element - #mobilegrid {}

## 1 Mobile Grid Element - #mobilegrid {}

This element produces a jQuery Mobile Layout Grid Element, which is a wrapper to allow you to break a mobile page up into a grid-like layout, consisting of rows and columns. Each block of this grid is defined with a series of #mobilegridblock{} elements.

### Usage

    #mobile_grid {
       columns=2
       body=[
          #mobile_grid_block{ text="Row 1, Cell 1" },
          #mobile_grid_block{ text="Row 1, Cell 2" },
          #mobile_grid_block{ text="Row 2, Cell 1" },
          #mobile_grid_block{ new_row = true, text="Row 3, Cell 1"},
          #mobile_grid_block{ text="Row 3, Cell 2"}
       ]
    }

### Attributes

columns - (integer(2-5))
  Set the number of columns to use for this grid, each containing block will automatically be set to the correct row and column, based on this number.
blocks - (List of #mobilegridblock{})
  Set the list of mobile blocks. To skip to end a row early and skip down to the next row, set the #mobilegridblock{}'s newrow attribute to 'true'. Elements defined after a 'newrow' element will continue from that block in a normal fashion.

### See Also

- jQuery mobile elements
- base element
- mobile gridblock element
- table element

Date: 2012-10-18 03:25:04 CDT

Author: Jesse Gumm (@jessegumm)

Org version 7.8.02 with Emacs version 23

Validate XHTML 1.0

## Comments

Note:To specify code blocks, just use the generic code block syntax:

    <pre><code>your code here</code></pre>

comments powered by Disqus