我的书签
添加书签
移除书签
Grid React Component
Grid React component represents Framework7’s Layout Grid.
Grid Components
There are following components included:
**Row**/**F7Row**- grid row**Col**/**F7Col**- grid column (cell)
Grid Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| <Row> properties | |||
| --- | --- | --- | --- |
| noGap | boolean | false | Removes spacing between columns |
| tag | string | div | Defines which tag must be used to render row element |
| <Col> properties | |||
| width | number string | auto | Column width. Check available Column Sizes |
| tabletWidth | number string | Column width for large screen tablets (when width >= 768px) | |
| desktopWidth | number string | Column width for larger screen tablets (when width >= 1025px) |
Examples
1. <Block>
2. <p>Columns within a row are automatically set to have equal width. Otherwise you can define your column with pourcentage of screen you want.</p>
3. </Block>
5. <BlockTitle>Columns with gap</BlockTitle>
6. <Block>
7. <Row>
8. <Col>50% (.col)</Col>
9. <Col>50% (.col)</Col>
10. </Row>
11. <Row>
12. <Col>25% (.col)</Col>
13. <Col>25% (.col)</Col>
14. <Col>25% (.col)</Col>
15. <Col>25% (.col)</Col>
16. </Row>
17. <Row>
18. <Col>33% (.col)</Col>
19. <Col>33% (.col)</Col>
20. <Col>33% (.col)</Col>
21. </Row>
22. <Row>
23. <Col>20% (.col)</Col>
24. <Col>20% (.col)</Col>
25. <Col>20% (.col)</Col>
26. <Col>20% (.col)</Col>
27. <Col>20% (.col)</Col>
28. </Row>
29. <Row>
30. <Col width="33">33% (.col-33)</Col>
31. <Col width="66">66% (.col-66)</Col>
32. </Row>
33. <Row>
34. <Col width="25">25% (.col-25)</Col>
35. <Col width="25">25% (.col-25)</Col>
36. <Col width="50">50% (.col-50)</Col>
37. </Row>
38. <Row>
39. <Col width="75">75% (.col-75)</Col>
40. <Col width="25">25% (.col-25)</Col>
41. </Row>
42. <Row>
43. <Col width="80">80% (.col-80)</Col>
44. <Col width="20">20% (.col-20)</Col>
45. </Row>
46. </Block>
48. <BlockTitle>No gap between columns</BlockTitle>
49. <Block>
50. <Row noGap>
51. <Col>50% (.col)</Col>
52. <Col>50% (.col)</Col>
53. </Row>
54. <Row noGap>
55. <Col>25% (.col)</Col>
56. <Col>25% (.col)</Col>
57. <Col>25% (.col)</Col>
58. <Col>25% (.col)</Col>
59. </Row>
60. <Row noGap>
61. <Col>33% (.col)</Col>
62. <Col>33% (.col)</Col>
63. <Col>33% (.col)</Col>
64. </Row>
65. <Row noGap>
66. <Col>20% (.col)</Col>
67. <Col>20% (.col)</Col>
68. <Col>20% (.col)</Col>
69. <Col>20% (.col)</Col>
70. <Col>20% (.col)</Col>
71. </Row>
72. <Row noGap>
73. <Col width="33">33% (.col-33)</Col>
74. <Col width="66">66% (.col-66)</Col>
75. </Row>
76. <Row noGap>
77. <Col width="25">25% (.col-25)</Col>
78. <Col width="25">25% (.col-25)</Col>
79. <Col width="50">50% (.col-50)</Col>
80. </Row>
81. <Row noGap>
82. <Col width="75">75% (.col-75)</Col>
83. <Col width="25">25% (.col-25)</Col>
84. </Row>
85. <Row noGap>
86. <Col width="80">80% (.col-80)</Col>
87. <Col width="20">20% (.col-20)</Col>
88. </Row>
89. </Block>
91. <BlockTitle>Nested</BlockTitle>
92. <Block>
93. <Row>
94. <Col>50% (.col)
95. <Row>
96. <Col>50% (.col)</Col>
97. <Col>50% (.col)</Col>
98. </Row>
99. </Col>
100. <Col>50% (.col)
101. <Row>
102. <Col width="33">33% (.col-33)</Col>
103. <Col width="66">66% (.col-66)</Col>
104. </Row>
105. </Col>
106. </Row>
107. </Block>
109. <BlockTitle>Responsive Grid</BlockTitle>
110. <Block>
111. <p>Grid cells have different size on Phone/Tablet</p>
112. <Row>
113. <Col width="100" tabletWidth="50">.col-100.tablet-50</Col>
114. <Col width="100" tabletWidth="50">.col-100.tablet-50</Col>
115. </Row>
116. <Row>
117. <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
118. <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
119. <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
120. <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
121. </Row>
122. <Row>
123. <Col width="100" tabletWidth="40">.col-100.tablet-40</Col>
124. <Col width="50" tabletWidth="60">.col-50.tablet-60</Col>
125. <Col width="50" tabletWidth="66">.col-50.tablet-66</Col>
126. <Col width="100" tabletWidth="33">.col-100.tablet-33</Col>
127. </Row>
128. </Block>
