Tornado Logo

Grid Utilities - Tornado UI v2

The Grid Utilities is a bunch of assets classes that help you to align your elements change gutter space and much more…

Columns Gutters

Gutter is The space between columns and boxes it has 30px gutter by default you can increase or decrease The space by prefixed class’s given to The row element see The table below to know all available class’s.

Class Name Gutter Size
no-gutter Remove Gutters [0px] Space Between Columns
gutter-small Resize Gutters to [15px] Between Columns 7.5px on each side
gutter-medium Resize Gutters to [20px] Between Columns 10px on each side
gutter-large Duplicate Gutter Size [60px] Between Columns 30px on each side

Columns Alignment

Grid System Uses The Flexbox Alignment Options To Align Columns Vertically and Horizontally with classes , self element align and all elements at once you will see in The table below The classes for alignment with an explanation of what They do.

Class Name element description
align-center-z row Align All columns to The Center Vertically and Horizontally.
Horizontally Alignment
row-reverse row Row Horizontally Direction Reverse for Reversing LTR/RTL Flow.
align-center-x row Align All Columns to The Center Horizontally.
align-start-x row Align All Columns Horizontally to The Start Point of The Row.
align-end-x row Align All Columns Horizontally to The End Point of The Row.
align-around row Align All Columns Horizontally to The Center and Make The Remaining Space Around Them.
align-between row Align All Columns Horizontally to The Center and Make The Remaining Space Between Them.
Vertically Alignment
align-center-y row Align All Columns to The Center Vertically.
align-start-y row Align All Columns Vertically to The Top of The Row.
align-end-y row Align All Columns Vertically to The Bottom of The Row.
Single Column Alignment
align-self-start column Align Column Vertically to The Top of The Row.
align-self-center column Align Column Vertically to The Center of The Row.
align-self-end column Align Column Vertically to The Bottom of The Row.

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.