Basic grids

GridLayout is built using display: table, so you don't have to specify an exact cell size. The cells will be evenly sized depending on the number of cells you use.

1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
Equal height columns
“There are no hierarchies in nature other than those imposed by hierarchical modes of human thought, but rather differences merely in function between and within living things.”

Vertical grids

You can also do vertical layouts, using the gl-vertical class on the grid container.

1/2
1/2

Individual cell sizing

GridLayout provides a 12-column grid that you can use on both horizontal and vertical grids, with classes are similar to the Bootstrap grid.

You can also manually set a cell size with CSS, and the other cells will automatically resize.

gl-sm-4
gl-sm-6
gl-sm-2
gl-md-2 gl-lg-4
gl-md-10 gl-lg-8
width: 200px
Automatic sizing

Nesting

You can easily nest grids, just make sure you include the gl grid container.

To make a grid to take up the full height of its container, use the gl-fill class.

1/2
1/2
1/2
1/2
1/2
1/2
1/2

Vertically aligning content

You can align content vertically inside cells using the gl-align-middle and gl-align-bottom classes.

gl-align-bottom
gl-align-middle
default top alignment