Framework7 Layout Grid - Framework7

What is the use of Layout grid in Framework7?

Description

Framework7 offers different types of grid types for placing the content as per the user need.

Layout grid provides different types of columns sizes as mentioned in below table:

S.N.

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%

21

col-100

tablet-100

100%

22

col-auto

tablet-auto

Equal width

Example

Below example provides a grid layout for placing the content as needed in the Framework7:

Output

Below are the steps to see how above code works:

  • Save above HTML code as layout_grid.html file in the server root folder.
  • Open this HTML file as http://localhost/layout_grid.html and below output gets displayed.
  • This code offers different types of grid types to place the content as per the user need.

Layout Grid

Columns with gutter

col 1

col 2

col 1

col 2

col 3

col 4

col 1

col 2

col 3

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Framework7 Topics