Grid

Grids come in handy when you have multiple items that you want to display side by side or when you want to display couple of items in a particular layout.

Usage

Two Column Grid

The two column grid divides the page into two equal halfs such that the elements are aligned side by side.

Box 1
Box 2
Three Column Grid

The three column grid divides the page into three equal halfs such that the elements are aligned side by side.

Box 1
Box 2
Box 3
Masonry Grid

Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a masonry layout. On the masonry axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to completely fill the gaps.

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6