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

    Prop Type Default Description
    <Row> properties
    noGap boolean false Removes spacing between columns
    tag string div Defines which tag must be used to render row element
    <Col> properties
    width number
    string
    auto Column width. Check available Column Sizes
    tabletWidth number
    string
    Column width for large screen tablets (when width >= 768px)
    desktopWidth number
    string
    Column width for larger screen tablets (when width >= 1025px)

    Examples

    <Block>
      <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>
    </Block>
    
    <BlockTitle>Columns with gap</BlockTitle>
    <Block>
      <Row>
        <Col>50% (.col)</Col>
        <Col>50% (.col)</Col>
      </Row>
      <Row>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
      </Row>
      <Row>
        <Col>33% (.col)</Col>
        <Col>33% (.col)</Col>
        <Col>33% (.col)</Col>
      </Row>
      <Row>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
      </Row>
      <Row>
        <Col width="33">33% (.col-33)</Col>
        <Col width="66">66% (.col-66)</Col>
      </Row>
      <Row>
        <Col width="25">25% (.col-25)</Col>
        <Col width="25">25% (.col-25)</Col>
        <Col width="50">50% (.col-50)</Col>
      </Row>
      <Row>
        <Col width="75">75% (.col-75)</Col>
        <Col width="25">25% (.col-25)</Col>
      </Row>
      <Row>
        <Col width="80">80% (.col-80)</Col>
        <Col width="20">20% (.col-20)</Col>
      </Row>
    </Block>
    
    <BlockTitle>No gap between columns</BlockTitle>
    <Block>
      <Row noGap>
        <Col>50% (.col)</Col>
        <Col>50% (.col)</Col>
      </Row>
      <Row noGap>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
      </Row>
      <Row noGap>
        <Col>33% (.col)</Col>
        <Col>33% (.col)</Col>
        <Col>33% (.col)</Col>
      </Row>
      <Row noGap>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
      </Row>
      <Row noGap>
        <Col width="33">33% (.col-33)</Col>
        <Col width="66">66% (.col-66)</Col>
      </Row>
      <Row noGap>
        <Col width="25">25% (.col-25)</Col>
        <Col width="25">25% (.col-25)</Col>
        <Col width="50">50% (.col-50)</Col>
      </Row>
      <Row noGap>
        <Col width="75">75% (.col-75)</Col>
        <Col width="25">25% (.col-25)</Col>
      </Row>
      <Row noGap>
        <Col width="80">80% (.col-80)</Col>
        <Col width="20">20% (.col-20)</Col>
      </Row>
    </Block>
    
    <BlockTitle>Nested</BlockTitle>
    <Block>
      <Row>
        <Col>50% (.col)
          <Row>
            <Col>50% (.col)</Col>
            <Col>50% (.col)</Col>
          </Row>
        </Col>
        <Col>50% (.col)
          <Row>
            <Col width="33">33% (.col-33)</Col>
            <Col width="66">66% (.col-66)</Col>
          </Row>
        </Col>
      </Row>
    </Block>
    
    <BlockTitle>Responsive Grid</BlockTitle>
    <Block>
      <p>Grid cells have different size on Phone/Tablet</p>
      <Row>
        <Col width="100" tabletWidth="50">.col-100.tablet-50</Col>
        <Col width="100" tabletWidth="50">.col-100.tablet-50</Col>
      </Row>
      <Row>
        <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
        <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
        <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
        <Col width="50" tabletWidth="25">.col-50.tablet-25</Col>
      </Row>
      <Row>
        <Col width="100" tabletWidth="40">.col-100.tablet-40</Col>
        <Col width="50" tabletWidth="60">.col-50.tablet-60</Col>
        <Col width="50" tabletWidth="66">.col-50.tablet-66</Col>
        <Col width="100" tabletWidth="33">.col-100.tablet-33</Col>
      </Row>
    </Block>