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:

IndexClassTable classWidth
1)col-5tablet-55%
2)col-10tablet-1010%
3)col-15tablet-1515%
4)col-20tablet-2020%
5)col-25tablet-2525%
6)col-30tablet-3030%
7)col-33tablet-3333.3%
8)col-35tablet-3535%
9)col-40tablet-4040%
10)col-45tablet-4545%
11)col-50tablet-5050%
12)col-55tablet-5555%
13)col-60tablet-6060%
14)col-65tablet-6565%
15)col-66tablet-6666.6%
16)col-70tablet-7070%
17)col-75tablet-7575%
18)col-80tablet-8080%
19)col-85tablet-8585%
20)col-90tablet-9090%
21)col-95tablet-9595%
22)col-100tablet-100100%
23)col-autotablet-autoEqual width

Example

Test it Now




Latest Courses