Grid Vue Component

Grid Vue component represents Framework7's Layout Grid.

Usage examples

Equal width columns

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

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

<f7-grid no-gutter>
  <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-grid>

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

<f7-grid>
  <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-grid>

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
<f7-grid> properties
no-gutter	boolean		Removes spacing between columns
<f7-col> properties
width	string/number	"auto"	Column width
tablet-width	string/number		Column width for large screen tablets