Grid React Component

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
resizable	boolean	false	Makes row resizable
resizableAbsolute	boolean	false	Enables absolute resizing (in `px`)
resizableFixed	boolean	false	Keeps resizable row in fixed size (not resizable)
resizableHhandler	boolean	true	Adds resize handler element (between rows) to resize them
<Col> properties
width	number string	auto	Column width. Check available Column Sizes
xsmall	number		Column width when app width >= 480px
small	number		Column width when app width >= 568px
medium	number		Column width when app width >= 768px
large	number		Column width when app width >= 1024px
xlarge	number		Column width when app width >= 1200px
resizable	boolean	false	Makes column resizable
resizableAbsolute	boolean	false	Enables absolute resizing (in `px`)
resizableFixed	boolean	false	Keeps resizable column in fixed size (not resizable)
resizableHandler	boolean	true	Adds resize handler element (between columns) to resize them

Grid Events

Event	Description
<Row> events
---	---
gridResize	Event will be triggered on resizable grid row resize
<Col> events
gridResize	Event will be triggered on resizable grid column resize

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" medium="50">.col-100.tablet-50</Col>
114. <Col width="100" medium="50">.col-100.tablet-50</Col>
115. </Row>
116. <Row>
117. <Col width="50" medium="25">.col-50.tablet-25</Col>
118. <Col width="50" medium="25">.col-50.tablet-25</Col>
119. <Col width="50" medium="25">.col-50.tablet-25</Col>
120. <Col width="50" medium="25">.col-50.tablet-25</Col>
121. </Row>
122. <Row>
123. <Col width="100" medium="40">.col-100.tablet-40</Col>
124. <Col width="50" medium="60">.col-50.tablet-60</Col>
125. <Col width="50" medium="66">.col-50.tablet-66</Col>
126. <Col width="100" medium="33">.col-100.tablet-33</Col>
127. </Row>
128. </Block>

130. <BlockTitle>Resizable Cols</BlockTitle>
131. <Block className="grid-resizable-demo">
132. <Row>
133. <Col resizable style={{minWidth: '20px'}}>1</Col>
134. <Col resizable style={{minWidth: '20px'}}>2</Col>
135. <Col resizable style={{minWidth: '20px'}}>3</Col>
136. </Row>
137. </Block>

139. <BlockTitle>Resizable Fixed Col</BlockTitle>
140. <BlockHeader>2nd column has fixed size</BlockHeader>
141. <Block className="grid-resizable-demo">
142. <Row>
143. <Col resizable style={{minWidth: '20px'}}>1</Col>
144. <Col resizable resizableFixed style={{minWidth: '20px'}}>2</Col>
145. <Col resizable style={{minWidth: '20px'}}>3</Col>
146. </Row>
147. </Block>

149. <BlockTitle>Resizable Grid</BlockTitle>
150. <Block className="grid-resizable-demo">
151. <Row className="align-items-stretch" style={{height: '300px'}}>
152. <Col resizable className="demo-col-center-content" style={{minWidth: '50px'}}>Left</Col>
153. <Col resizable className="display-flex flex-direction-column" style={{
154. padding: '0px',
155. border: 'none',
156. minWidth: '50px',
157. backgroundColor: 'transparent',
158. }}>
159. <Row resizable style={{height: '50%', minHeight: '50px'}}>
160. <Col className="demo-col-center-content" style={{height: '100%'}}>Center Top</Col>
161. </Row>
162. <Row resizable style={{height: '50%', minHeight: '50px'}}>
163. <Col className="demo-col-center-content" style={{height: '100%'}}>Center Bottom</Col>
164. </Row>
165. </Col>
166. <Col resizable className="demo-col-center-content" style={{minWidth: '50px'}}>Right</Col>
167. </Row>
168. </Block>

← Gauge

Icon →

Grid / Layout Grid

Grid React Component

Grid Components

Grid Properties

Grid Events

Examples