A grid is a special purpose widget that resembles a table with equal width rows and columns. Grids are not particular useful on mobile devices except where very small elements need to be arranged in a grid fashion. For example, a grid of icons or buttons may be useful.
A grid is defined first by the number of columns and then by adding elements to each column.
Each column can have different numbers of elements but they arrange at equal heights.
A grid is defined by a
<div> tag with a
class attribute having one of the following values.
class="ui-grid-solo"- one column grid
class="ui-grid-a"- two column grid (each column 50% of width)
class="ui-grid-b"- three column grid (each column 33% of width)
class="ui-grid-c"- four column grid (each column 25% of width)
class="ui-grid-d"- five column grid (each column 20% of width)
Then inside the <div> tag we define each grid element with another <div> element with
class attribute defined:
class="ui-block-a"- place in column 1
class="ui-block-b"- place in column 2
class="ui-block-c"- place in column 3
class="ui-block-d"- place in column 4
class="ui-block-e"- place in column 5
We can define multiple blocks which are placed in the specified column in the order they are declared.
We can also add style attributes to
<div> tags to be applied to elements or to the whole grid.
As an example, consider the following grid definition which places an uneven number of elements in each column of a three column grid.
<div class="ui-grid-b"> <div class="ui-block-a"><span>AAA</span></div> <div class="ui-block-b"><span>BBB</span></div> <div class="ui-block-a"><span>AAA</span></div> <div class="ui-block-a"><span>AAA</span></div> <div class="ui-block-c"><span>CCC</span></div> <div class="ui-block-c"><span>CCC</span></div> </div>
This grid would be displayed as three equal width columns as:
Notice how the first column has three elements because there are three elements declared with the
ui-block-a value in the class field.
However, be warned that some browsers have trouble with uneven numbered colums if they do not progress from taller to shorter columns.
You can correct for this by inserting grid blank elements.
If you really want a grid with large elements you can make your grid responsive like the tables in the
previous section by adding the
ui-responsive value to the class attribute, e.g.
<div class="ui-grid-a ui-responsive">
The following grid is the same as the above one but with the value
class attribute to make it responsive.
Try adjusting the width of your window to see the change and compare it with the above grid.