iview/examples/routers/grid.vue

<style>
    .view {
        height: 100px;
        width: 100px;
        background: yellow;
    }
</style>
<template>
    <div>
        <Row type='flex' justify='center'>
            <i-col span='21' class="offset-header">
                <Row type='flex' :gutter='16' justify='space-between'>
                    <i-col :order='25'>
                        <div class="view">
                            <label>245</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='1'>
                        <div class="view" >
                            <label>1</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='2'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='3'>
                        <div class="view"   >
                            <label>3</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='4'>
                        <div class="view"   >
                            <label>4</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='5'>
                        <div class="view"   >
                            <label>5</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='6'>
                        <div class="view"   >
                            <label>6</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='7'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='8'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='9'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='10'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='11'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='12'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='13'>
                        <div class="view"   >
                            <label>12</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='14'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='15'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='16'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='17'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='18'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='19'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='20'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='21'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='22'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='23'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='24'>
                        <div class="view"   >
                            <label>2</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='25'>
                        <div class="view"   >
                            <label>25-------</label>
                        </div>
                    </i-col>
                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='26'>
                        <div class="view"   >
                            <label>26------</label>
                        </div>
                    </i-col>
                </Row>
            </i-col>
        </Row>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                n: 2
            }
        },
        methods: {
            add () {
                this.n++;
            }
        }
    }
</script>