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:

ClassTablet Class
width >= 768px		Desktop Class
width >= 1025px		Width
col-5tablet-5desktop-55%
col-10tablet-10desktop-1010%
col-15tablet-15desktop-1515%
col-20tablet-20desktop-2020%
col-25tablet-25desktop-2525%
col-30tablet-30desktop-3030%
col-33tablet-33desktop-3333.333333333333336%
col-35tablet-35desktop-3535%
col-40tablet-40desktop-4040%
col-45tablet-45desktop-4545%
col-50tablet-50desktop-5050%
col-55tablet-55desktop-5555%
col-60tablet-60desktop-6060%
col-65tablet-65desktop-6565%
col-66tablet-66desktop-6666.66666666666666%
col-70tablet-70desktop-7070%
col-75tablet-75desktop-7575%
col-80tablet-80desktop-8080%
col-85tablet-85desktop-8585%
col-90tablet-90desktop-9090%
col-95tablet-95desktop-9595%
col-100tablet-100desktop-100100%
coltablet-autodesktop-autoEqual width

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>