Grid / Layout Grid - 图1

Grid React Component

Grid React component represents Framework7’s Layout Grid.

Grid Components

There are following components included:

  • **Row** / **F7Row** - grid row
  • **Col** / **F7Col** - grid column (cell)

Grid Properties

PropTypeDefaultDescription
<Row> properties
noGapbooleanfalseRemoves spacing between columns
tagstringdivDefines which tag must be used to render row element
<Col> properties
widthnumber
string		autoColumn width. Check available Column Sizes
tabletWidthnumber
string		Column width for large screen tablets (when width >= 768px)
desktopWidthnumber
string		Column width for larger screen tablets (when width >= 1025px)

Examples

  1. <Block>
  2.   <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>
  3. </Block>
  5. <BlockTitle>Columns with gap</BlockTitle>
  6. <Block>
  7.   <Row>
  8.     <Col>50% (.col)</Col>
  9.     <Col>50% (.col)</Col>
  10.   </Row>
  11.   <Row>
  12.     <Col>25% (.col)</Col>
  13.     <Col>25% (.col)</Col>
  14.     <Col>25% (.col)</Col>
  15.     <Col>25% (.col)</Col>
  16.   </Row>
  17.   <Row>
  18.     <Col>33% (.col)</Col>
  19.     <Col>33% (.col)</Col>
  20.     <Col>33% (.col)</Col>
  21.   </Row>
  22.   <Row>
  23.     <Col>20% (.col)</Col>
  24.     <Col>20% (.col)</Col>
  25.     <Col>20% (.col)</Col>
  26.     <Col>20% (.col)</Col>
  27.     <Col>20% (.col)</Col>
  28.   </Row>
  29.   <Row>
  30.     <Col width="33">33% (.col-33)</Col>
  31.     <Col width="66">66% (.col-66)</Col>
  32.   </Row>
  33.   <Row>
  34.     <Col width="25">25% (.col-25)</Col>
  35.     <Col width="25">25% (.col-25)</Col>
  36.     <Col width="50">50% (.col-50)</Col>
  37.   </Row>
  38.   <Row>
  39.     <Col width="75">75% (.col-75)</Col>
  40.     <Col width="25">25% (.col-25)</Col>
  41.   </Row>
  42.   <Row>
  43.     <Col width="80">80% (.col-80)</Col>
  44.     <Col width="20">20% (.col-20)</Col>
  45.   </Row>
  46. </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" tabletWidth="50">.col-100.tablet-50</Col>
  114.     <Col width="100" tabletWidth="50">.col-100.tablet-50</Col>
  115.   </Row>
  116.   <Row>
  117.     <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
  118.     <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
  119.     <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
  120.     <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
  121.   </Row>
  122.   <Row>
  123.     <Col width="100" tabletWidth="40">.col-100.tablet-40</Col>
  124.     <Col width="50" tabletWidth="60">.col-50.tablet-60</Col>
  125.     <Col width="50" tabletWidth="66">.col-50.tablet-66</Col>
  126.     <Col width="100" tabletWidth="33">.col-100.tablet-33</Col>
  127.   </Row>
  128. </Block>