Working with the Grid

Canvas comes with some really handy flexible module positions that sit beneath the main content of the site - we like to call these nine modules 'The Grid'. The grid consists of 9 module positions from grid1, grid2 ... grid 9. In Joomla 1.5 these module positions are immediately available in the Joomla admin but for j1.0 users you will need to setup the grid module positions as per these instructions.

The grid expands the modules published in a number of different methods depending on which modules are published. All you need to do is publish the modules you want in the positions you want them in and the template will do the rest. The grid is made up of three lines of three modules each. The first line contains grid1, grid2 and grid3. The second line contains grid4, grid5 and grid6 and the third line contain grid7, grid8 and grid9.


Three evenly spaced module positions.
This configuration appears when you publish one module to grid1, grid2, and grid3 or one module to grid4, grid5 and grid6, or one module to grid7, grid8 and grid9.

gridEven

Module combinations that will achieve this layout:

  • Grid1, Grid2, Grid3
  • Grid4, Grid5, Grid6
  • Grid7, Grid8, Grid9

Wide left module position and a normal width module on the right.
This configuration appears when you publish one module to grid1, grid4, and grid7 and one other module to grid2, grid5 and grid8. The first module ie grid1, grid4 and grid7 expands to fill the space of two modules while the module positioned at grid2, grid5 and grid8 fill only one normal module width.

gridEven

Module combinations that will achieve this layout:

  • Grid1, Grid2
  • Grid4, Grid5
  • Grid7, Grid8

Wide right module position and a normal width module on the left.
This configuration appears when you publish one module to grid3, grid6, and grid9 and one other module to grid2, grid5 and grid8. The first module ie grid3, grid6 and grid9 expands to fill the space of two modules on the right while the modules positioned at grid2, grid5 and grid8 fill only one normal module width and is positioned on the left.

gridEven

Module combinations that will achieve this layout:

  • Grid2, Grid3
  • Grid5, Grid6
  • Grid8, Grid9

Two even width modules.
This configuration appears when you publish one module to grid1, grid4, and grid7 and one other module to grid3, grid6 and grid9. Both modules in the row fill to 45% of the full width of the page giving you an even two column layout.

gridEven

Module combinations that will achieve this layout:

  • Grid1, Grid3
  • Grid4, Grid6
  • Grid7, Grid9

Publishing multiple rows of modules in the grid.

You can also have multiple rows of modules according to the formula above. So by publishing two modules to the grid4 and grid5 positions you would have two rows of modules with the modules published to grid4 floating to the left and taking up two module spaces and the two modules published to grid5 floating to the right and taking up a single module space.

The image below displays how you might display multiople modules across rows in the grid - specifically if multiple modules are published to positions grid4, grid5 and grid7, grid8 and grid9.

canvas_grid_mulitples