栅格系统

<div class="mcr-container">
    <div class="mcr-row mcr-col-space10">
        <div class="mcr-col-xs6 mcr-col-sm6 mcr-col-md4">
            移动：6/12 | 平板：6/12 | 桌面：4/12
        </div>
        <div class="mcr-col-xs6 mcr-col-sm6 mcr-col-md4">
            移动：6/12 | 平板：6/12 | 桌面：4/12
        </div>
        <div class="mcr-col-xs4 mcr-col-sm12 mcr-col-md4">
            移动：4/12 | 平板：12/12 | 桌面：4/12
        </div>
        <div class="mcr-col-xs4 mcr-col-sm7 mcr-col-md8">
            移动：4/12 | 平板：7/12 | 桌面：8/12
        </div>
        <div class="mcr-col-xs4 mcr-col-sm5 mcr-col-md4">
            移动：4/12 | 平板：5/12 | 桌面：4/12
        </div>
    </div>
</div>

常用形式

<div class="mcr-container">
    <div class="mcr-row mcr-col-space10">
        <div class="mcr-col-xs6 mcr-col-sm6 mcr-col-md4">
            移动：6/12 | 平板：6/12 | 桌面：4/12
        </div>
    </div>
</div>

---

可以选择 mcr-container、mcr-fluid 类。

    
xs（超小屏幕，如手机）、
sm（小屏幕，如平板）、
md（桌面中等屏幕）、
lg（桌面大型屏幕），
    

列间距

    
.mcr-col-space1
.mcr-col-space2
.mcr-col-space4
.mcr-col-space5
.mcr-col-space6
.mcr-col-space8
.mcr-col-space10
.mcr-col-space12
.mcr-col-space14
.mcr-col-space15
.mcr-col-space16
.mcr-col-space18
.mcr-col-space20
.mcr-col-space22
.mcr-col-space24
.mcr-col-space25
.mcr-col-space26
.mcr-col-space28
.mcr-col-space30