-
Get Started
-
React Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Grid React Component
Grid React component represents Framework7's Layout Grid.
Grid Components
There are following components included:
Row
/F7Row
- grid rowCol
/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>