Grid / Layout Grid - 图1

Grid Vue Component

Grid Vue component represents Framework7’s Layout Grid.

Grid Components

There are following components included:

  • **f7-row** - grid row
  • **f7-col** - grid column (cell)

Grid Properties

PropTypeDefaultDescription
<f7-row> properties
no-gapbooleanfalseRemoves spacing between columns
tagstringdivDefines which tag must be used to render row element
<f7-col> properties
widthnumber
string		autoColumn width. Check available Column Sizes
tablet-widthnumber
string		Column width for large screen tablets (when width >= 768px)
desktop-widthnumber
string		Column width for larger screen tablets (when width >= 1025px)

Examples

  1. <f7-block>
  2.   <p>Columns within a row are automatically set to have equal width. Otherwise you can define your column with percentage of screen you want.</p>
  3. </f7-block>
  5. <f7-block-title>Columns with gap</f7-block-title>
  6. <f7-block>
  7.   <f7-row>
  8.     <f7-col>50% (.col)</f7-col>
  9.     <f7-col>50% (.col)</f7-col>
  10.   </f7-row>
  11.   <f7-row>
  12.     <f7-col>25% (.col)</f7-col>
  13.     <f7-col>25% (.col)</f7-col>
  14.     <f7-col>25% (.col)</f7-col>
  15.     <f7-col>25% (.col)</f7-col>
  16.   </f7-row>
  17.   <f7-row>
  18.     <f7-col>33% (.col)</f7-col>
  19.     <f7-col>33% (.col)</f7-col>
  20.     <f7-col>33% (.col)</f7-col>
  21.   </f7-row>
  22.   <f7-row>
  23.     <f7-col>20% (.col)</f7-col>
  24.     <f7-col>20% (.col)</f7-col>
  25.     <f7-col>20% (.col)</f7-col>
  26.     <f7-col>20% (.col)</f7-col>
  27.     <f7-col>20% (.col)</f7-col>
  28.   </f7-row>
  29.   <f7-row>
  30.     <f7-col width="33">33% (.col-33)</f7-col>
  31.     <f7-col width="66">66% (.col-66)</f7-col>
  32.   </f7-row>
  33.   <f7-row>
  34.     <f7-col width="25">25% (.col-25)</f7-col>
  35.     <f7-col width="25">25% (.col-25)</f7-col>
  36.     <f7-col width="50">50% (.col-50)</f7-col>
  37.   </f7-row>
  38.   <f7-row>
  39.     <f7-col width="75">75% (.col-75)</f7-col>
  40.     <f7-col width="25">25% (.col-25)</f7-col>
  41.   </f7-row>
  42.   <f7-row>
  43.     <f7-col width="80">80% (.col-80)</f7-col>
  44.     <f7-col width="20">20% (.col-20)</f7-col>
  45.   </f7-row>
  46. </f7-block>
  48. <f7-block-title>No gap between columns</f7-block-title>
  49. <f7-block>
  50.   <f7-row no-gap>
  51.     <f7-col>50% (.col)</f7-col>
  52.     <f7-col>50% (.col)</f7-col>
  53.   </f7-row>
  54.   <f7-row no-gap>
  55.     <f7-col>25% (.col)</f7-col>
  56.     <f7-col>25% (.col)</f7-col>
  57.     <f7-col>25% (.col)</f7-col>
  58.     <f7-col>25% (.col)</f7-col>
  59.   </f7-row>
  60.   <f7-row no-gap>
  61.     <f7-col>33% (.col)</f7-col>
  62.     <f7-col>33% (.col)</f7-col>
  63.     <f7-col>33% (.col)</f7-col>
  64.   </f7-row>
  65.   <f7-row no-gap>
  66.     <f7-col>20% (.col)</f7-col>
  67.     <f7-col>20% (.col)</f7-col>
  68.     <f7-col>20% (.col)</f7-col>
  69.     <f7-col>20% (.col)</f7-col>
  70.     <f7-col>20% (.col)</f7-col>
  71.   </f7-row>
  72.   <f7-row no-gap>
  73.     <f7-col width="33">33% (.col-33)</f7-col>
  74.     <f7-col width="66">66% (.col-66)</f7-col>
  75.   </f7-row>
  76.   <f7-row no-gap>
  77.     <f7-col width="25">25% (.col-25)</f7-col>
  78.     <f7-col width="25">25% (.col-25)</f7-col>
  79.     <f7-col width="50">50% (.col-50)</f7-col>
  80.   </f7-row>
  81.   <f7-row no-gap>
  82.     <f7-col width="75">75% (.col-75)</f7-col>
  83.     <f7-col width="25">25% (.col-25)</f7-col>
  84.   </f7-row>
  85.   <f7-row no-gap>
  86.     <f7-col width="80">80% (.col-80)</f7-col>
  87.     <f7-col width="20">20% (.col-20)</f7-col>
  88.   </f7-row>
  89. </f7-block>
  91. <f7-block-title>Nested</f7-block-title>
  92. <f7-block>
  93.   <f7-row>
  94.     <f7-col>50% (.col)
  95.       <f7-row>
  96.         <f7-col>50% (.col)</f7-col>
  97.         <f7-col>50% (.col)</f7-col>
  98.       </f7-row>
  99.     </f7-col>
  100.     <f7-col>50% (.col)
  101.       <f7-row>
  102.         <f7-col width="33">33% (.col-33)</f7-col>
  103.         <f7-col width="66">66% (.col-66)</f7-col>
  104.       </f7-row>
  105.     </f7-col>
  106.   </f7-row>
  107. </f7-block>
  109. <f7-block-title>Responsive Grid</f7-block-title>
  110. <f7-block>
  111.   <p>Grid cells have different size on Phone/Tablet</p>
  112.   <f7-row>
  113.     <f7-col width="100" tablet-width="50">.col-100.tablet-50</f7-col>
  114.     <f7-col width="100" tablet-width="50">.col-100.tablet-50</f7-col>
  115.   </f7-row>
  116.   <f7-row>
  117.     <f7-col width="50" tablet-width="25">.col-50.tablet-25</f7-col>
  118.     <f7-col width="50" tablet-width="25">.col-50.tablet-25</f7-col>
  119.     <f7-col width="50" tablet-width="25">.col-50.tablet-25</f7-col>
  120.     <f7-col width="50" tablet-width="25">.col-50.tablet-25</f7-col>
  121.   </f7-row>
  122.   <f7-row>
  123.     <f7-col width="100" tablet-width="40">.col-100.tablet-40</f7-col>
  124.     <f7-col width="50" tablet-width="60">.col-50.tablet-60</f7-col>
  125.     <f7-col width="50" tablet-width="66">.col-50.tablet-66</f7-col>
  126.     <f7-col width="100" tablet-width="33">.col-100.tablet-33</f7-col>
  127.   </f7-row>
  128. </f7-block>