Grid / Layout Grid

Framework7 comes with flexible layout grid that allows you place your content as you need.

Grid Layout

1. <!-- Each "cells" row should be wrapped with div class="row" -->
2. <div class="row">
3. <!-- Each "cell" has col-[width in percents] class -->
4. <div class="col-50">50%</div>
5. <div class="col-50">50%</div>
6. </div>
7. <div class="row">
8. <!-- Each "cell" has col-[width in percents] class -->
9. <div class="col-33">33%</div>
10. <div class="col-33">33%</div>
11. <div class="col-33">33%</div>
12. </div>

By defaul all “cells” has 15px gap between each other for iOS theme and 16px gap for MD theme. If you want “cells” without gap, you should add additional **no-gap** class to “row”:

1. <!-- Additional "no-gap" class on row to remove space between cells -->
2. <div class="row no-gap">
3. <!-- Each "cell" has col-[width in percents] class -->
4. <div class="col-50">50%</div>
5. <div class="col-50">50%</div>
6. </div>
7. <div class="row">
8. <!-- Each "cell" has col-[width in percents] class -->
9. <div class="col-33">33%</div>
10. <div class="col-33">33%</div>
11. <div class="col-33">33%</div>
12. </div>

Column Sizes

The following columns size are available:

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

1. .ios {
2. --f7-grid-gap: 15px;
3. }
4. .md {
5. --f7-grid-gap: 16px;
6. }
7. .aurora {
8. --f7-grid-gap: 15px;
9. }

Examples

By default grid columns (cells) has no any visual styles, we’ll add them for this demo:

1. div[class*="col"] {
2. background: #fff;
3. text-align: center;
4. color: #000;
5. border: 1px solid #ddd;
6. padding: 5px;
7. margin-bottom: 15px;
8. font-size: 12px;
9. }

1. <div class="block-title">Columns with gap</div>
2. <div class="block">
3. <div class="row">
4. <div class="col">50% (.col)</div>
5. <div class="col">50% (.col)</div>
6. </div>
7. <div class="row">
8. <div class="col">25% (.col)</div>
9. <div class="col">25% (.col)</div>
10. <div class="col">25% (.col)</div>
11. <div class="col">25% (.col)</div>
12. </div>
13. <div class="row">
14. <div class="col">33% (.col)</div>
15. <div class="col">33% (.col)</div>
16. <div class="col">33% (.col)</div>
17. </div>
18. <div class="row">
19. <div class="col">20% (.col)</div>
20. <div class="col">20% (.col)</div>
21. <div class="col">20% (.col)</div>
22. <div class="col">20% (.col)</div>
23. <div class="col">20% (.col)</div>
24. </div>
25. <div class="row">
26. <div class="col-33">33% (.col-33)</div>
27. <div class="col-66">66% (.col-66)</div>
28. </div>
29. <div class="row">
30. <div class="col-25">25% (.col-25)</div>
31. <div class="col-25">25% (.col-25)</div>
32. <div class="col-50">50% (.col-50)</div>
33. </div>
34. <div class="row">
35. <div class="col-75">75% (.col-75)</div>
36. <div class="col-25">25% (.col-25)</div>
37. </div>
38. <div class="row">
39. <div class="col-80">80% (.col-80)</div>
40. <div class="col-20">20% (.col-20)</div>
41. </div>
42. </div>

1. <div class="block-title">No gap between columns</div>
2. <div class="block">
3. <div class="row no-gap">
4. <div class="col">50% (.col)</div>
5. <div class="col">50% (.col)</div>
6. </div>
7. <div class="row no-gap">
8. <div class="col">25% (.col)</div>
9. <div class="col">25% (.col)</div>
10. <div class="col">25% (.col)</div>
11. <div class="col">25% (.col)</div>
12. </div>
13. <div class="row no-gap">
14. <div class="col">33% (.col)</div>
15. <div class="col">33% (.col)</div>
16. <div class="col">33% (.col)</div>
17. </div>
18. <div class="row no-gap">
19. <div class="col">20% (.col)</div>
20. <div class="col">20% (.col)</div>
21. <div class="col">20% (.col)</div>
22. <div class="col">20% (.col)</div>
23. <div class="col">20% (.col)</div>
24. </div>
25. <div class="row no-gap">
26. <div class="col-33">33% (.col-33)</div>
27. <div class="col-66">66% (.col-66)</div>
28. </div>
29. <div class="row no-gap">
30. <div class="col-25">25% (.col-25)</div>
31. <div class="col-25">25% (.col-25)</div>
32. <div class="col-50">50% (.col-50)</div>
33. </div>
34. <div class="row no-gap">
35. <div class="col-75">75% (.col-75)</div>
36. <div class="col-25">25% (.col-25)</div>
37. </div>
38. <div class="row no-gap">
39. <div class="col-80">80% (.col-80)</div>
40. <div class="col-20">20% (.col-20)</div>
41. </div>
42. </div>

1. <div class="block-title">Nested</div>
2. <div class="block">
3. <div class="row">
4. <div class="col">50% (.col)
5. <div class="row">
6. <div class="col">50% (.col)</div>
7. <div class="col">50% (.col)</div>
8. </div>
9. </div>
10. <div class="col">50% (.col)
11. <div class="row">
12. <div class="col-33">33% (.col-33)</div>
13. <div class="col-66">66% (.col-66)</div>
14. </div>
15. </div>
16. </div>
17. </div>

1. <div class="block-title">Responsive Grid</div>
2. <div class="block">
3. <p>Grid cells have different size on Phone/Tablet</p>
4. <div class="row">
5. <div class="col-100 tablet-50">.col-100.tablet-50</div>
6. <div class="col-100 tablet-50">.col-100.tablet-50</div>
7. </div>
8. <div class="row">
9. <div class="col-50 tablet-25">.col-50.tablet-25</div>
10. <div class="col-50 tablet-25">.col-50.tablet-25</div>
11. <div class="col-50 tablet-25">.col-50.tablet-25</div>
12. <div class="col-50 tablet-25">.col-50.tablet-25</div>
13. </div>
14. <div class="row">
15. <div class="col-100 tablet-40">.col-100.tablet-40</div>
16. <div class="col-50 tablet-60">.col-50.tablet-60</div>
17. <div class="col-50 tablet-66">.col-50.tablet-66</div>
18. <div class="col-100 tablet-33">.col-100.tablet-33</div>
19. </div>
20. </div>