Heading 1

Grids are built by assigning the class grid to any Div Block. Depending on the class combinations, grids can be resized, aligned and justified.

The grid class can be combined with the following classes to achieve the desired layout and alignment.

Number of Column classes

To choose how many grid columns you want, add the following classes after the flex class.

• Two Column Grids: a two col class.
• Three Column Grids: add three col class.
• Four Column Grids: add four col class.
• Five Column Grids: add five col class.
• Six Column Grids: add six col class.
• Seven Column Grids: add seven col class.
• Eight Column Grids: add eight col class.

Vertical Alignment Classes

To vertically align the elements within the grid cells, add the following classes after the grid class.

• Top Alignment: add top class.
• Middle Alignment: add mid class.
• Bottom Alignment: add bot class.
• Stretched Alignment: add stretch class.

Horizontal Alignment Classes

To vertically align the elements within the grid cells, use the following classes.

• Left Alignment: add left class.
• Center Alignment: add cen class.
• Right Alignment: add right class.
• Justified Alignment: add just class.

Flex-boxes are built by assigning the class flex to any Div Block. Depending on the class combinations, grids can be resized, aligned and justified.

The flex class can be combined with the following classes to achieve the desired layout and alignment.

Type of Flex-Box

To choose what type of flex you want, add the following classes after the flex class.

• Horizontal: add hor class.
• Vertical: add ver class.

Horizontal Flex-Box: vertical Alignment

To vertically align the elements within the flex hor, add the following classes at the end.

• Top Alignment: add top class.
• Middle Alignment: add mid class.
• Bottom Alignment: add bot class.
• Stretched Alignment: add stretch class.

Horizontal Flex-Box: Horizontal Alignment

To horizontally align the elements within the flex hor, add the following classes at the end.

• Left Alignment: add left class.
• Center Alignment: add cen class.
• Right Alignment: add right class.
• Spaced Alignment: add spaced class.
• Space Around Alignment: add padded class.

Vertical Flex-Box: horizontal Alignment

To horizontally align the elements within the flex ver, add the following classes at the end.

• Left Alignment: add left class.
• Center Alignment: add cen class.
• Right Alignment: add right class.
• Stretched Alignment: add stretch class.

Vertical Flex-Box: Vertical Alignment

To vertically align the elements within the flex ver, add the following classes at the end.

• Top Alignment: add top class.
• Middle Alignment: add mid class.
• Bottom Alignment: add bot class.
• Stretched Alignment: add stretch class.‍
• Space Around Alignment: add padded class.

Padding is set by using the pad class. Depending on the class combinations, padding sizes and exceptions can be made.

Padding Sizes

Depending on the desired padding, you should use the following classes after the pad class.

• Small: add small pad class.
• Big: add big pad class.

Global Side exceptions

By adding the following classes, you can create exceptions on padding on the planes (top & bottom) or on sides.

• No Side Padding: add no side pad class.
• No Top and Bottom Padding: add no plane pad class.

Specific Side exceptions

By adding the following classes, you can create exceptions for padding on specific sides.

• No Top Padding: add no top pad class.
• No Right Padding: add no right pad class.
• No Bottom Padding: add no bot pad class.
• No Left Padding: add no left pad class.

Breakpoint Exceptions

By adding the following classes at the end, you can create exceptions for all sides for specific breakpoints.

• No Padding on Tablet: add no tab pad class.
• No Padding on Mobile Landscape: add no lan pad class.
• No Bottom on Mobile Portrait: add no mob pad class.