浅谈elementUI Layout布局（栅格布局实现）

elementUI Layout

通过基础的 24 分栏，迅速简便地创建布局。 顾名思义，就是将每行等为24列，然后可以通过控制要实现内容占用的列数来达到想要的布局效果

实现原理

elementUI的栅格布局实现原理是通过浮动进行内容的排列，宽度使用占用百分比

实现步骤

初始状态

<div class="row">
    <div class="col">
        <div style="background-color: red">床前明月光</div>
    </div>
    <div class="col">
        <div style="background-color: green">疑是地上霜</div>
    </div>
    <div class="col">
        <div style="background-color: blue">举头望明月</div>
    </div>
    <div class="col">
        <div style="background-color: orange">低头思故乡</div>
    </div>
</div>

.box {
    margin-top: 100px;
    border: 1px solid red;
}

栅格布局后状态

<div class="row">
    <div class="col col-6">
        <div style="background-color: red">床前明月光</div>
    </div>
    <div class="col col-6">
        <div style="background-color: green">疑是地上霜</div>
    </div>
    <div class="col col-6">
        <div style="background-color: blue">举头望明月</div>
    </div>
    <div class="col col-6">
        <div style="background-color: orange">低头思故乡</div>
    </div>
</div>

.box {
    margin-top: 100px;
    border: 1px solid red;
}
.row {
    /* 设置外面大盒子margin值，目的是在设置内部项目间距时可以保证边缘没有空白 */
    margin-left: -10px;
    margin-right: -10px;
    /* 清除浮动 */
    &::after,
    &::before {
        content: "";
        display: table;
    }
    &::after {
        clear: both;
    }
    /* 设置浮动项 */
    .col {
        float: left;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }

    @for $i from 0 through 24 {
        .col-#{$i} {
            width: $i / 24 * 100%;
        }
    }
}

实现效果如下，也可以根据自己的需求进行更改或封装组件

下面多贴几个效果