The Grid Utilities is a bunch of assets classes that help you to align your elements change gutter space and much more…
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 |
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. |