Grid React Component

Grid React component represents Framework7's Layout Grid.

Grid Components

There are following components included:

  • Row - grid row
  • Col - grid column (cell)

Grid Properties

PropTypeDefaultDescription
<Row> properties
noGapbooleanfalseRemoves spacing between columns
tagstringdivDefines which tag must be used to render row element
resizablebooleanfalseMakes row resizable
resizableAbsolutebooleanfalseEnables absolute resizing (in px)
resizableFixedbooleanfalseKeeps resizable row in fixed size (not resizable)
resizableHandlerbooleantrueAdds resize handler element (between rows) to resize them
<Col> properties
tagstringdivDefines which tag must be used to render column element
widthnumber
string
autoColumn width. Check available Column Sizes
xsmallnumber
string
Column width when app width >= 480px
smallnumber
string
Column width when app width >= 568px
mediumnumber
string
Column width when app width >= 768px
largenumber
string
Column width when app width >= 1024px
xlargenumber
string
Column width when app width >= 1200px
resizablebooleanfalseMakes column resizable
resizableAbsolutebooleanfalseEnables absolute resizing (in px)
resizableFixedbooleanfalseKeeps resizable column in fixed size (not resizable)
resizableHandlerbooleantrueAdds resize handler element (between columns) to resize them

Grid Events

EventDescription
<Row> events
gridResizeEvent will be triggered on resizable grid row resize
<Col> events
gridResizeEvent will be triggered on resizable grid column resize

Examples

import React from 'react';
import {
  Page,
  Navbar,
  Block,
  BlockTitle,
  Row,
  Col,
  BlockHeader,
} from 'framework7-react';
import './grid.css';

export default () => (
  
    
  <Page className="grid-demo">
    <Navbar title="Grid / Layout"></Navbar>
    <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" medium="50">
          .col-100.medium-50
        </Col>
        <Col width="100" medium="50">
          .col-100.medium-50
        </Col>
      </Row>
      <Row>
        <Col width="50" medium="25">
          .col-50.medium-25
        </Col>
        <Col width="50" medium="25">
          .col-50.medium-25
        </Col>
        <Col width="50" medium="25">
          .col-50.medium-25
        </Col>
        <Col width="50" medium="25">
          .col-50.medium-25
        </Col>
      </Row>
      <Row>
        <Col width="100" medium="40">
          .col-100.medium-40
        </Col>
        <Col width="50" medium="60">
          .col-50.medium-60
        </Col>
        <Col width="50" medium="66">
          .col-50.medium-66
        </Col>
        <Col width="100" medium="33">
          .col-100.medium-33
        </Col>
      </Row>
    </Block>

    <BlockTitle>Resizable Cols</BlockTitle>
    <Block className="grid-resizable-demo">
      <Row>
        <Col resizable style={{ minWidth: '20px' }}>
          1
        </Col>
        <Col resizable style={{ minWidth: '20px' }}>
          2
        </Col>
        <Col resizable style={{ minWidth: '20px' }}>
          3
        </Col>
      </Row>
    </Block>

    <BlockTitle>Resizable Fixed Col</BlockTitle>
    <BlockHeader>2nd column has fixed size</BlockHeader>
    <Block className="grid-resizable-demo">
      <Row>
        <Col resizable style={{ minWidth: '20px' }}>
          1
        </Col>
        <Col resizable resizableFixed style={{ minWidth: '20px' }}>
          2
        </Col>
        <Col resizable style={{ minWidth: '20px' }}>
          3
        </Col>
      </Row>
    </Block>

    <BlockTitle>Resizable Grid</BlockTitle>
    <Block className="grid-resizable-demo">
      <Row className="align-items-stretch" style={{ height: '300px' }}>
        <Col resizable className="demo-col-center-content" style={{ minWidth: '50px' }}>
          Left
        </Col>
        <Col
          resizable
          className="display-flex flex-direction-column"
          style={{
            padding: '0px',
            border: 'none',
            minWidth: '50px',
            backgroundColor: 'transparent',
          }}
        >
          <Row resizable style={{ height: '50%', minHeight: '50px' }}>
            <Col className="demo-col-center-content" style={{ height: '100%' }}>
              Center Top
            </Col>
          </Row>
          <Row resizable style={{ height: '50%', minHeight: '50px' }}>
            <Col className="demo-col-center-content" style={{ height: '100%' }}>
              Center Bottom
            </Col>
          </Row>
        </Col>
        <Col resizable className="demo-col-center-content" style={{ minWidth: '50px' }}>
          Right
        </Col>
      </Row>
    </Block>
  </Page>
    
  
);
/* grid.css */
.grid-demo div[class*='col'] {
  background: #fff;
  text-align: center;
  color: #000;
  border: 1px solid #ddd;
  padding: 5px;
  margin-bottom: 15px;
  font-size: 12px;
}
.grid-resizable-demo {
  --f7-grid-row-gap: 16px;
}
.grid-resizable-demo div[class*='col'] {
  margin-bottom: 0;
}
.grid-resizable-demo .demo-col-center-content {
  display: flex;
  align-items: center;
  justify-content: center;
}