Grid

Grid uses a series of containers, rows, and columns to layout and align content.

Two items in a grid - Column

Grid Item 1
Grid Item 2

Two items in a grid takes up entire width of column and display it's child into two equal parts. you can use grid-2-column class as parent class and grid-item class to its child to get the similar result as shown. However you can change the various properties according to your's need.

Two items in a grid - Row

Grid Item 1
Grid Item 2

Two items in a grid takes up entire width of row and display it's child into two equal parts. you can use grid-2-row class as parent class and grid-item class to its child to get the similar result as shown. However you can change the various properties according to your's need.

Three items in a grid - Column

Grid Item 1
Grid Item 2
Grid Item 3

Three items in a grid takes up entire column width of parent's container and display it's child into three equal parts. you can use grid-3-column class as parent class and grid-item class to its child to get the similar result as shown. However you can change the various properties according to your's need.

Three items in a grid - Row

Grid Item 1
Grid Item 2
Grid Item 3

Three items in a grid takes up entire row width of parent's container and display it's child into three equal parts. you can use grid-3-row class as parent class and grid-item class to its child to get the similar result as shown. However you can change the various properties according to your's need.

On this Page

Grid Two items in a grid Three items in a grid