-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Grid React Component
Grid React component represents Framework7's Layout Grid.
Usage examples
Equal width columns
<GridRow>
<GridCol>Col 1</GridCol>
<GridCol>Col 2</GridCol>
<GridCol>Col 3</GridCol>
</GridRow>
Renders to:
<div class="row">
<div class="col-auto"></div>
<div class="col-auto"></div>
<div class="col-auto"></div>
</div>
No gutter and fixed size
<GridRow noGutter>
<GridCol width="50">Col 50%</GridCol>
<GridCol width="25">Col 25%</GridCol>
<GridCol width="25">Col 25%</GridCol>
</GridRow>
Renders to:
<div class="row no-gutter">
<div class="col-50"></div>
<div class="col-25"></div>
<div class="col-25"></div>
</div>
Different columns width on tablet
<GridRow>
<GridCol width="50" tabletWidth="25">Col 1</GridCol>
<GridCol width="50" tabletWidth="25">Col 2</GridCol>
<GridCol width="50" tabletWidth="25">Col 3</GridCol>
<GridCol width="50" tabletWidth="25">Col 4</GridCol>
</GridRow>
Renders to:
<div class="row">
<div class="col-50 tablet-25">Col 1</div>
<div class="col-50 tablet-25">Col 2</div>
<div class="col-50 tablet-25">Col 3</div>
<div class="col-50 tablet-25">Col 4</div>
</div>
Properties
Prop | Type | Default | Description |
---|---|---|---|
<GridRow> properties | |||
noGutter | boolean | Removes spacing between columns | |
<GridCol> properties | |||
width | string/number | "auto" | Column width |
tabletWidth | string/number | Column width for large screen tablets |