Framework7 v2
Support Framework7
stars forks
Improve this Doc

Grid Vue Component

Grid Vue component represents Framework7's Layout Grid.

Grid Components

There are following components included:

  • f7-row - grid row
  • f7-col - grid column (cell)

Grid Properties

Prop Type Default Description
<f7-row> properties
no-gap boolean false Removes spacing between columns
tag string div Defines which tag must be used to render row element
<f7-col> properties
width number
string		 auto Column width. Check available Column Sizes
tablet-width number
string		 Column width for large screen tablets (when width >= 768px)
desktop-width number
string		 Column width for larger screen tablets (when width >= 1025px)

Examples

Equal width columns

<f7-row>
  <f7-col>Col 1</f7-col>
  <f7-col>Col 2</f7-col>
  <f7-col>Col 3</f7-col>
</f7-row>

Renders to:

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

No gap and fixed size

<f7-row no-gap>
  <f7-col width="50">Col 50%</f7-col>
  <f7-col width="25">Col 25%</f7-col>
  <f7-col width="25">Col 25%</f7-col>
</f7-row>

Renders to:

<div class="row no-gap">
  <div class="col-50"></div>
  <div class="col-25"></div>
  <div class="col-25"></div>
</div>

Different columns width on tablet

<f7-row>
  <f7-col width="50" tablet-width="25">Col 1</f7-col>
  <f7-col width="50" tablet-width="25">Col 2</f7-col>
  <f7-col width="50" tablet-width="25">Col 3</f7-col>
  <f7-col width="50" tablet-width="25">Col 4</f7-col>
</f7-row>

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>