Framework7 Layout Grids
Content grid is used to place the content according to your need. Framework 7 provides different types of grid types and different types of columns size.
A list of different types of classes for different column sizes:
Index |
Class |
Table class |
Width |
1) |
col-5 |
tablet-5 |
5% |
2) |
col-10 |
tablet-10 |
10% |
3) |
col-15 |
tablet-15 |
15% |
4) |
col-20 |
tablet-20 |
20% |
5) |
col-25 |
tablet-25 |
25% |
6) |
col-30 |
tablet-30 |
30% |
7) |
col-33 |
tablet-33 |
33.3% |
8) |
col-35 |
tablet-35 |
35% |
9) |
col-40 |
tablet-40 |
40% |
10) |
col-45 |
tablet-45 |
45% |
11) |
col-50 |
tablet-50 |
50% |
12) |
col-55 |
tablet-55 |
55% |
13) |
col-60 |
tablet-60 |
60% |
14) |
col-65 |
tablet-65 |
65% |
15) |
col-66 |
tablet-66 |
66.6% |
16) |
col-70 |
tablet-70 |
70% |
17) |
col-75 |
tablet-75 |
75% |
18) |
col-80 |
tablet-80 |
80% |
19) |
col-85 |
tablet-85 |
85% |
20) |
col-90 |
tablet-90 |
90% |
21) |
col-95 |
tablet-95 |
95% |
22) |
col-100 |
tablet-100 |
100% |
23) |
col-auto |
tablet-auto |
Equal width |
Example
Test it Now
|