Grid React Component

Grid Components
Grid Properties
Grid Events
Examples

Grid React component represents Framework7's Layout Grid.

Grid Components

There are following components included:

Row - grid row
Col - 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
resizable	boolean	false	Makes row resizable
resizableAbsolute	boolean	false	Enables absolute resizing (in `px`)
resizableFixed	boolean	false	Keeps resizable row in fixed size (not resizable)
resizableHandler	boolean	true	Adds resize handler element (between rows) to resize them
<Col> properties
tag	string	div	Defines which tag must be used to render column element
width	number string	auto	Column width. Check available Column Sizes
xsmall	number string		Column width when app width >= 480px
small	number string		Column width when app width >= 568px
medium	number string		Column width when app width >= 768px
large	number string		Column width when app width >= 1024px
xlarge	number string		Column width when app width >= 1200px
resizable	boolean	false	Makes column resizable
resizableAbsolute	boolean	false	Enables absolute resizing (in `px`)
resizableFixed	boolean	false	Keeps resizable column in fixed size (not resizable)
resizableHandler	boolean	true	Adds resize handler element (between columns) to resize them

Grid Events

Event	Description
<Row> events
gridResize	Event will be triggered on resizable grid row resize
<Col> events
gridResize	Event 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;
}