Recently i've started using amazing UIkit for website development https://getuikit.com/ But i faced one pretty sad problem. Uikit is using a little bit different grid system from Bootstrap. So, because of this and because our Designers still be doing their designs as for 12 columns, i put together UIkit grid accordance to Bootstrap grid table.
| Bootstrap cols out of 12 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| UIkit width options | - | 1/6 | 1/4 | 1/3 | 2/5 | 1/2 | 3/5 | 2/3 | 3/4 | 5/6 | - | 1/1 |
| Percentage of page container | 8.3% | 16,6% | 25% | 33,3% | 41,6% | 50% | 58,3% | 66,6% | 75% | 83,3% | 91,6 | 100% |
And also here are available classes for columns width for UIkit:
Unique = % = can't be used (use unique)uk-column-1-2 = 50% = uk-column-2-4 = uk-column-3-6 uk-column-1-3 = 33.3% = uk-column-2-6uk-column-2-3 = 66.6% = uk-column-4-6uk-column-1-4 = 25%uk-column-3-4 = 75%uk-column-1-5 = 20%uk-column-2-5 = 40%uk-column-3-5 = 60%uk-column-4-5 = 80%uk-column-1-6 = 16.6%uk-column-5-6 = 83.3%