Vue Framework

Vue Grid Responsive


Specifying sizes

xs=12 md=4 lg=3
xs=12 md=4 lg=3
xs=12 md=4 lg=3
xs=12 md=4 lg=3
xs=12 lg=6
xs=12 lg=6
lg=4
lg=4
lg=4

    <template>
      <row :gutter="12">
        <column :xs="12" :md="4" :lg="3">xs=12 md=4 lg=3</column>
        <column :xs="12" :md="4" :lg="3">xs=12 md=4 lg=3</column>
        <column :xs="12" :md="4" :lg="3">xs=12 md=4 lg=3</column>
        <column :xs="12" :md="4" :lg="3">xs=12 md=4 lg=3</column>
        <column :xs="12" :lg="6">xs=12 lg=6</column>
        <column :xs="12" :lg="6">xs=12 lg=6</column>
        <column :lg="4">lg=4</column>
        <column :lg="4">lg=4</column>
        <column :lg="4">lg=4</column>
      </row>
    </template>

Without define sizes

col
col
col

col
col
col
col
col

    <template>
      <row :gutter="12">
        <column>col</column>
        <column>col</column>
        <column>col</column>
      </row>
      <row :gutter="12">
        <column>col</column>
        <column>col</column>
        <column>col</column>
        <column>col</column>
        <column>col</column>
      </row>
    </template>

Setting columns count

xs=10 md=5 lg=2
xs=10 md=5 lg=2
xs=10 md=5 lg=2
xs=10 md=5 lg=2
xs=10 md=5 lg=2
xs=10 lg=3
xs=10 lg=4
xs=10 lg=3

    <template>
      <row :gutter="12" :columns="10">
        <column :xs="10" :md="5" :lg="2">xs=10 md=5 lg=2</column>
        <column :xs="10" :md="5" :lg="2">xs=10 md=5 lg=2</column>
        <column :xs="10" :md="5" :lg="2">xs=10 md=5 lg=2</column>
        <column :xs="10" :md="5" :lg="2">xs=10 md=5 lg=2</column>
        <column :xs="10" :md="5" :lg="2">xs=10 md=5 lg=2</column>
        <column :xs="10" :lg="3">xs=10 lg=3</column>
        <column :xs="10" :lg="3">xs=10 lg=3</column>
        <column :xs="10" :lg="3">xs=10 lg=3</column>
      </row>
    </template>

Column ordering

First, but second
Second, but last
Third, but unordered

    <template>
      <row :gutter="50">
        <column :xs="12" :lg="4">First, but second</column>
        <column :xs="12" :lg="4">Second, but last</column>
        <column :xs="12" :lg="4">Third, but unordered</column>
      </row>
    </template>

Changing gutter

xs=12 md=4 lg=3
xs=12 md=4 lg=3
xs=12 md=4 lg=3
xs=12 md=4 lg=3

    <template>
      <row :gutter="50">
        <column :xs="12" :md="4" :lg="3">xs=12 md=4 lg=3</column>
        <column :xs="12" :md="4" :lg="3">xs=12 md=4 lg=3</column>
        <column :xs="12" :md="4" :lg="3">xs=12 md=4 lg=3</column>
        <column :xs="12" :md="4" :lg="3">xs=12 md=4 lg=3</column>
      </row>
    </template>