| Class | Properties |
|---|---|
| col-12 | width: 100%; |
| col-11 | width: 91.66666667% |
| col-10 | width: 83.33333333%; |
| col-9 | width: 75% |
| col-8 | width: 66.66666667%; |
| col-7 | width: 58.33333333%; |
| col-6 | width: 50%; |
| col-5 | width: 41.66666667%; |
| col-4 | width: 33.33333333%; |
| col-3 | width: 25%; |
| col-2 | width: 16.66666667% |
| col-1 | width: 8.33333333%; |
| Large Desktop | Normal Desktop | Small Desktop - Large Tablet | Tablet | Mobile |
|---|---|---|---|---|
| xl-col-12 | lg-col-12 | md-col-12 | sm-col-12 | xs-col-12 |
| xl-col-11 | lg-col-11 | md-col-11 | sm-col-11 | xs-col-11 |
| xl-col-10 | lg-col-10 | md-col-10 | sm-col-10 | xs-col-10 |
| xl-col-9 | lg-col-9 | md-col-9 | sm-col-9 | xs-col-9 |
| xl-col-8 | lg-col-8 | md-col-8 | sm-col-8 | xs-col-8 |
| xl-col-7 | lg-col-7 | md-col-7 | sm-col-7 | xs-col-7 |
| xl-col-6 | lg-col-6 | md-col-6 | sm-col-6 | xs-col-6 |
| xl-col-5 | lg-col-5 | md-col-5 | sm-col-5 | xs-col-5 |
| xl-col-4 | lg-col-4 | md-col-4 | sm-col-4 | xs-col-4 |
| xl-col-2 | lg-col-2 | md-col-2 | sm-col-2 | xs-col-2 |
| xl-col-1 | lg-col-1 | md-col-1 | sm-col-1 | xs-col-1 |
| Class | Properties |
|---|---|
| kmd-content-full | width: 100%; |
| kmd-content-lg | max-width: 1180px; |
| kmd-content-md | max-width: 768px; |
| kmd-content-sm | max-width: 680px; |
| kmd-content-xs | max-width: 480px; |
| kmd-content-xxs | max-width: 320px; |
kmd-content-full
kmd-content-lg
kmd-content-md
kmd-content-sm
kmd-content-xs
kmd-content-xxs
Column #1 - xl-col-11 lg-col-11 md-col-9 sm-col-12 xs-col-12
Column #2 - xl-col-1 lg-col-1 md-col-3 sm-col-12 xs-col-12Column #1 - xl-col-5 lg-col-5 md-col-6 sm-col-12 xs-col-12 md-pos-1 sm-pos-1 xs-pos-1
Column #2 - xl-col-2 lg-col-2 md-col-12 sm-col-12 xs-col-12 md-pos-3 sm-pos-3 xs-pos-3
Column #3 - xl-col-5 lg-col-5 md-col-6 sm-col-12 xs-col-12 md-pos-2 sm-pos-2 xs-pos-2
| Large Desktop | Normal Desktop | Small Desktop - Large Tablet |
|---|---|---|
| xl-1-of-10 | lg-1-of-10 | md-1-of-10 |
| xl-2-of-10 | lg-2-of-10 | md-2-of-10 |
| xl-3-of-10 | lg-3-of-10 | md-3-of-10 |
| xl-4-of-10 | lg-4-of-10 | md-4-of-10 |
| xl-5-of-10 | lg-5-of-10 | md-5-of-10 |
| xl-6-of-10 | lg-6-of-10 | md-6-of-10 |
| xl-7-of-10 | lg-7-of-10 | md-7-of-10 |
| xl-8-of-10 | lg-8-of-10 | md-8-of-10 |
| xl-9-of-10 | lg-9-of-10 | md-9-of-10 |
| xl-10-of-10 | lg-10-of-10 | md-10-of-10 |
Example of mixed grid use 12 columns and 10 columns
Column #1 xl-4-of-10 lg-4-of-10 md-col-6 sm-col-12 xs-col-12
Column #1 xl-2-of-10 lg-4-of-10 md-col-6 sm-col-12 xs-col-12
Column #1 xl-4-of-10 lg-2-of-10 md-col-12 sm-col-12 xs-col-12Test Content Text
Test Content Text
Test Content Text
Test Content Text
