响应式布局之栅格布局

 

栅格布局

栅格布局就是把一个页面的宽度分成了24份，

<template>
    <div>
        <!-- 栅格布局
            el-row属性
            :gutter="10" 设置 每一个栅格之间的间隔  不写默认是0
            type="flex" 布局模式 
            justify="center"  flex 布局下的水平排列方式  
            align="middle"  flex 布局下的垂直排列方式
            el-row属性 
            :span="8" 栅格占据的列数（栅格的宽度）
            :offset="1" 栅格左侧的间隔格数  （可以设置栅格左侧的距离和移动栅格的位置）
            :push="1"  栅格向右移动的格数  （可以设置栅格向右移动）
            :pull="1"  栅格向左移动的格数  （可以设置栅格向左移动）
        -->
        <el-row :gutter="10" type="flex" align="middle">
            <el-col :span="8" :offset="1" :push="1" :pull="1">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="8" :push="1">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <!-- 响应式的栅格 
            :xs 是在屏幕宽度<768px 显示的宽度
            :sm 是在屏幕宽度>=768px 显示的宽度
            :md 是在屏幕宽度>=992px 显示的宽度
            :lg 是在屏幕宽度>=1200px 显示的宽度
            :xl 是在屏幕宽度>=1920px 显示的宽度
         -->
        <el-row :gutter="10">
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
</script>

<style>
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>

这样就会响应式的根据屏幕的变化而变化就是响应式的