格栅系统 转载dcloud.io

栅格系统

mui中定义了一个简单适用的栅格系统，将每一行宽度平均分为12份，每一份作为一个子栅格，每一行的内容置于.mui-row行容器中，通过.mui-col-xs-*和.mui-col-sm-*将行分成若干行。使用以下媒体查询（media query）将.mui-row像素宽度400px作为分界，.mui-row像素宽度低于400px的使用.mui-col-xs-*，当.mui-row像素宽度高于400px使用.mui-col-sm-*。.mui-row宽度若不设置，默认为屏幕像素宽度。

通过给每一行中的列设置1~12的数值，相应列的宽度会随着.mui-row像素宽度变化。若一行中列的数值和大于12，多余的列所在元素会作为一个整体另起一行排列。

    

        .mui-col-sm-3
    
    

        .mui-col-sm-9
    

这样我们得到了两列元素，当.mui-row像素宽度低于400px时，左侧宽度为4份子栅格宽度，右侧宽度为8份子栅格宽度；当.mui-row像素宽度高于400px时，左侧宽度为4份子栅格宽度，右侧宽度为8份子栅格宽度。