Grid / Layout Grid - 图1

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:

Classxsmall
width >= 480px		small
width >= 568px		medium
width >= 768px		large
width >= 1024px		xlarge
width >= 1200px		Width
col-5xsmall-5small-5medium-5large-5xlarge-55%
col-10xsmall-10small-10medium-10large-10xlarge-1010%
col-15xsmall-15small-15medium-15large-15xlarge-1515%
col-20xsmall-20small-20medium-20large-20xlarge-2020%
col-25xsmall-25small-25medium-25large-25xlarge-2525%
col-30xsmall-30small-30medium-30large-30xlarge-3030%
col-33xsmall-33small-33medium-33large-33xlarge-3333.333333333333336%
col-35xsmall-35small-35medium-35large-35xlarge-3535%
col-40xsmall-40small-40medium-40large-40xlarge-4040%
col-45xsmall-45small-45medium-45large-45xlarge-4545%
col-50xsmall-50small-50medium-50large-50xlarge-5050%
col-55xsmall-55small-55medium-55large-55xlarge-5555%
col-60xsmall-60small-60medium-60large-60xlarge-6060%
col-65xsmall-65small-65medium-65large-65xlarge-6565%
col-66xsmall-66small-66medium-66large-66xlarge-6666.66666666666666%
col-70xsmall-70small-70medium-70large-70xlarge-7070%
col-75xsmall-75small-75medium-75large-75xlarge-7575%
col-80xsmall-80small-80medium-80large-80xlarge-8080%
col-85xsmall-85small-85medium-85large-85xlarge-8585%
col-90xsmall-90small-90medium-90large-90xlarge-9090%
col-95xsmall-95small-95medium-95large-95xlarge-9595%
col-100xsmall-100small-100medium-100large-100xlarge-100100%
colxsmall-autosmall-automedium-autolarge-autoxlarge-autoEqual width

Resizable Grid

It is also possible to make layout grid resizable. Let’s take a look at its HTML layout:

  1. <div class="row">
  2.   <div class="col resizable">
  3.     ...
  4.     <span class="resize-handler"></span>
  5.   </div>
  6.   <div class="col resizable">
  7.     ...
  8.     <span class="resize-handler"></span>
  9.   </div>
  10.   ...
  11. </div>

where:

  • resizable - additional class on column to make it resizable
  • <span class="resize-handler"></span> - resize handler between columns that is used to resize columns

There are also additional classes that can be used to control resizing:

  • resizable-fixed - columns with such class will have fixed size (not resizable)
  • resizable-absolute - enables absolute (in px) resizing. When it is not enabled, it resize columns in relative form (sets width in %), this keeps them responsive. With absolute resize it will set absolute size in px to each column, but it can break responsiveness.

In the same way, we can make grid rows resizable as well:

  1. <div>
  2.   <!-- add "resizable" class to row -->
  3.   <div class="row resizable">
  4.     <div class="col">...</div>
  5.     <div class="col">...</div>
  6.     <!-- put "resize-handler" as the last child of the row -->
  7.     <span class="resize-handler"></span>
  8.   </div>
  10.   <!-- add "resizable" class to row -->
  11.   <div class="row resizable">
  12.     <div class="col">...</div>
  13.     <div class="col">...</div>
  14.     <!-- put "resize-handler" as the last child of the row -->
  15.     <span class="resize-handler"></span>
  16.   </div>
  18.   ...
  19. </div>

Resizable rows support same additional resizable-fixed and resizable-absolute modifiers.

  • To limit colums min/max size (width), they must have min-width and max-with CSS properties specified
  • To limit rows min/max size (height), they must have min-height and max-height CSS properties specified
  • By default rows (as well as columns) resized in “relative way”, to ensure it works correctly, make sure they have parent with fixed height

Grid Events

Grid will fire the following DOM events on column and row items and app events on app instance:

DOM Events

EventTargetDescription
grid:resizeGrid column or row element<div class=”col”><div class=”row”>Event will be triggered on resizable grid column (or row) resize

App Events

EventArgumentsDescription
gridResize(el)Event will be triggered on resizable grid column (or row) resize

CSS Variables

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

  1. :root {
  2.   --f7-grid-gap: 16px;
  3.   --f7-grid-row-gap: 0px;
  4.   --f7-grid-resize-handler-bg-color: rgba(0, 0, 0, 0.35);
  5. }
  6. :root .theme-dark,
  7. :root.theme-dark {
  8.   --f7-grid-resize-handler-bg-color: rgba(255, 255, 255, 0.35);
  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: 16px;
  8.   font-size: 12px;
  9. }
  11. .grid-resizable-demo {
  12.   --f7-grid-row-gap: 16px;
  13. }
  14. .grid-resizable-demo div[class*="col"] {
  15.   margin-bottom: 0;
  16. }
  17. .grid-resizable-demo .demo-col-center-content {
  18.   display: flex;
  19.   align-items: center;
  20.   justify-content: center;
  21. }
  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 medium-50">.col-100.medium-50</div>
  6.     <div class="col-100 medium-50">.col-100.medium-50</div>
  7.   </div>
  8.   <div class="row">
  9.     <div class="col-50 medium-25">.col-50.medium-25</div>
  10.     <div class="col-50 medium-25">.col-50.medium-25</div>
  11.     <div class="col-50 medium-25">.col-50.medium-25</div>
  12.     <div class="col-50 medium-25">.col-50.medium-25</div>
  13.   </div>
  14.   <div class="row">
  15.     <div class="col-100 medium-40">.col-100.medium-40</div>
  16.     <div class="col-50 medium-60">.col-50.medium-60</div>
  17.     <div class="col-50 medium-66">.col-50.medium-66</div>
  18.     <div class="col-100 medium-33">.col-100.medium-33</div>
  19.   </div>
  20. </div>
  1. <div class="block-title">Resizable Cols</div>
  2. <div class="block grid-resizable-demo">
  3.   <div class="row">
  4.     <div class="col resizable" style="min-width: 20px">
  5.       <span>1</span>
  6.       <span class="resize-handler"></span>
  7.     </div>
  8.     <div class="col resizable" style="min-width: 20px">
  9.       <span>2</span>
  10.       <span class="resize-handler"></span>
  11.     </div>
  12.     <div class="col resizable" style="min-width: 20px">
  13.       <span>3</span>
  14.       <span class="resize-handler"></span>
  15.     </div>
  16.   </div>
  17. </div>
  1. <div class="block-title">Resizable Fixed Col</div>
  2. <div class="block-header">2nd column has fixed size</div>
  3. <div class="block grid-resizable-demo">
  4.   <div class="row">
  5.     <div class="col resizable" style="min-width: 20px">
  6.       <span>1</span>
  7.       <span class="resize-handler"></span>
  8.     </div>
  9.     <div class="col resizable resizable-fixed" style="min-width: 20px">
  10.       <span>2</span>
  11.       <span class="resize-handler"></span>
  12.     </div>
  13.     <div class="col resizable" style="min-width: 20px">
  14.       <span>3</span>
  15.       <span class="resize-handler"></span>
  16.     </div>
  17.   </div>
  18. </div>
  1. <div class="block-title">Resizable Grid</div>
  2. <div class="block grid-resizable-demo">
  3.   <div class="row align-items-stretch" style="height: 300px">
  4.     <div class="col resizable demo-col-center-content" style="min-width: 50px">
  5.       | Left
  6.       <span class="resize-handler"></span>
  7.     </div>
  8.     <div class="col resizable display-flex flex-direction-column" style="padding: 0px; border: none; min-width: 50px; background-color: transparent">
  9.       <div class="row resizable" style="height: 50%; min-height: 50px">
  10.         <div class="col demo-col-center-content" style="height: 100%">Center Top</div>
  11.         <span class="resize-handler"></span>
  12.       </div>
  13.       <div class="row resizable" style="height: 50%; min-height: 50px">
  14.         <div class="col demo-col-center-content" style="height: 100%">Center Bottom</div>
  15.         <span class="resize-handler"></span>
  16.       </div>
  17.       <span class="resize-handler"></span>
  18.     </div>
  19.     <div class="col resizable demo-col-center-content" style="min-width: 50px">
  20.       | Right
  21.       <span class="resize-handler"></span>
  22.     </div>
  23.   </div>
  24. </div>

← Gauge

Icons →