Grid Structure

Description

When creating a grid, we will create the outer grid container with two or more inner blocks:

• Grid container
• Blocks

Grid container

Grid container: The grid container requires the CSS attribute ui-grid-* to set the number of columns in the grid.

For instance, to create a two-column grid we would set our grid CSS attribute to ui-grid-a.

Number of Columns         Grid CSS Attribute
2                         ui-grid-a
3                         ui-grid-b
4                         ui-grid-c
5                         ui-grid-d

Blocks

Blocks: The blocks are contained within the grid.

The blocks require the CSS attribute ui-block-* to identify its column position.

For instance, if we had a two-column grid, our first block would be styled with CSS attribute ui-block-a and the second block would be styled with CSS attribute ui-block-b.

Column            Block CSS Attribute
1st               ui-block-a
2nd               ui-block-b
3rd               ui-block-c
4th               ui-block-d
5th               ui-block-e