Grid Svelte Component

Grid Svelte Component

Grid Svelte component represents Framework7’s Layout Grid.

Grid Components

There are following components included:

Row - grid row
Col - 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. Can be `div` or `p`
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
tag	string	div	Defines which tag must be used to render row element. Can be `div` or `span`
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. <Page class="grid-demo">
2. <Navbar title="Grid / Layout"></Navbar>
3. <Block>
4. <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>
5. </Block>
6. <BlockTitle>Columns with gap</BlockTitle>
7. <Block>
8. <Row>
9. <Col>50% (.col)</Col>
10. <Col>50% (.col)</Col>
11. </Row>
12. <Row>
13. <Col>25% (.col)</Col>
14. <Col>25% (.col)</Col>
15. <Col>25% (.col)</Col>
16. <Col>25% (.col)</Col>
17. </Row>
18. <Row>
19. <Col>33% (.col)</Col>
20. <Col>33% (.col)</Col>
21. <Col>33% (.col)</Col>
22. </Row>
23. <Row>
24. <Col>20% (.col)</Col>
25. <Col>20% (.col)</Col>
26. <Col>20% (.col)</Col>
27. <Col>20% (.col)</Col>
28. <Col>20% (.col)</Col>
29. </Row>
30. <Row>
31. <Col width="33">33% (.col-33)</Col>
32. <Col width="66">66% (.col-66)</Col>
33. </Row>
34. <Row>
35. <Col width="25">25% (.col-25)</Col>
36. <Col width="25">25% (.col-25)</Col>
37. <Col width="50">50% (.col-50)</Col>
38. </Row>
39. <Row>
40. <Col width="75">75% (.col-75)</Col>
41. <Col width="25">25% (.col-25)</Col>
42. </Row>
43. <Row>
44. <Col width="80">80% (.col-80)</Col>
45. <Col width="20">20% (.col-20)</Col>
46. </Row>
47. </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 class="grid-resizable-demo">
132. <Row>
133. <Col resizable style="min-width: 20px">1</Col>
134. <Col resizable style="min-width: 20px">2</Col>
135. <Col resizable style="min-width: 20px">3</Col>
136. </Row>
137. </Block>

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

149. <BlockTitle>Resizable Grid</BlockTitle>
150. <Block class="grid-resizable-demo">
151. <Row class="align-items-stretch" style="height: 300px">
152. <Col resizable class="demo-col-center-content" style="min-width: 50px">Left</Col>
153. <Col resizable class="display-flex flex-direction-column" style="padding: 0px; border: none; min-width: 50px; background-color: transparent">
154. <Row resizable style="height: 50%; min-height: 50px">
155. <Col class="demo-col-center-content" style="height: 100%">Center Top</Col>
156. </Row>
157. <Row resizable style="height: 50%; min-height: 50px">
158. <Col class="demo-col-center-content" style="height: 100%">Center Bottom</Col>
159. </Row>
160. </Col>
161. <Col resizable class="demo-col-center-content" style="min-width: 50px">Right</Col>
162. </Row>
163. </Block>
164. </Page>

167. <style>
168. :global(.grid-demo div[class*="col"]) {
169. background: #fff;
170. text-align: center;
171. color: #000;
172. border: 1px solid #ddd;
173. padding: 5px;
174. margin-bottom: 15px;
175. font-size: 12px;
176. }
177. :global(.grid-resizable-demo) {
178. --f7-grid-row-gap: 16px;
179. }
180. :global(.grid-resizable-demo div[class*="col"]) {
181. margin-bottom: 0;
182. }
183. :global(.grid-resizable-demo .demo-col-center-content) {
184. display: flex;
185. align-items: center;
186. justify-content: center;
187. }
188. </style>
189. <script>
190. import {Page, Navbar, Block, BlockTitle, Row, Col, BlockHeader} from 'framework7-svelte';
191. </script>

← Gauge

Icon →

Grid / Layout Grid

Grid Svelte Component

Grid Components

Grid Properties

Grid Events

Examples