Back
Grid

Framework7 comes with flexible layout grid:

Columns with gutter
.col-50
.col-50
.col-25
.col-25
.col-25
.col-25
.col-33
.col-33
.col-33
.col-20
.col-20
.col-20
.col-20
.col-20
.col-33
.col-66
.col-25
.col-25
.col-50
.col-75
.col-25
.col-80
.col-20
No gutter between columns
.col-50
.col-50
.col-25
.col-25
.col-25
.col-25
.col-33
.col-33
.col-33
.col-20
.col-20
.col-20
.col-20
.col-20
.col-33
.col-66
.col-25
.col-25
.col-50
.col-75
.col-25
.col-80
.col-20
Nested
.col-50
.col-50
.col-50
.col-50
.col-33
.col-66
Responsive Grid

Grid cells have different size on Phone/Tablet

.col-100.tablet-50
.col-100.tablet-50
.col-50.tablet-25
.col-50.tablet-25
.col-50.tablet-25
.col-50.tablet-25
.col-100.tablet-40
.col-50.tablet-60
.col-50.tablet-66
.col-100.tablet-33