2 grid column
4 grid column
6 grid column
This page shows the basic grid framework.
The basic grid
"grow" and "gcol-x"
The container has a width of "w80" so jumps from 80% width at full screen, to 90% at the first breakpoint and then 100%. The minimum width is 320px and the maximum 1100px.
The columns are enclosed in a row called "grow", the columns themselves being called "gcol". The widths use the classes "gcol-1", "gcol-2", etc.
The orange and yellow colours are artifically added to show the grid structure.
With borders
"grow gcolborder" and "gcol-x"
If the class gcolborder is attached to the "grow" element, a border is placed around the "gcols" and padding applied so you can create visible columns. This container does not have a set width.
2 grid column
4 grid column
6 grid column
Use of gflex
Boxes and panels within a grid do not normally stretch to fill the height as shown below
2 grid column - single line
4 grid column
three lines
in this panel
three lines
in this panel
6 grid column
two lines
two lines
If you add "gflex" to the gcols, they will stretch to equal height
2 grid column - single line
4 grid column
three lines
in this panel
three lines
in this panel
6 grid column
two lines
two lines