MUI 提供了非常簡單實用的12列響應(yīng)式柵格系統(tǒng)。使用時只需在外圍容器上添加.mui-row，在列上添加.mui-col-[sm|xs]-[1-12]，即可.

? ? ?mui中定義了一個簡單適用的柵格系統(tǒng)，將每一行寬度平均分為12份，每一份作為一個子?xùn)鸥瘢恳恍械膬?nèi)容置于.mui-row行容器中，通過.mui-col-xs-*和.mui-col-sm-*將行分成若干行。使用以下媒體查詢（media query）將.mui-row像素寬度400px作為分界，.mui-row像素寬度低于400px的使用.mui-col-xs-*，當(dāng).mui-row像素寬度高于400px使用.mui-col-sm-*。.mui-row寬度若不設(shè)置，默認(rèn)為屏幕像素寬度。

通過給每一行中的列設(shè)置1~12的數(shù)值，相應(yīng)列的寬度會隨著.mui-row像素寬度變化。若一行中列的數(shù)值和大于12，多余的列所在元素會作為一個整體另起一行排列。

這樣我們得到了兩列元素，當(dāng).mui-row像素寬度低于400px時，左側(cè)寬度為4份子?xùn)鸥駥挾龋覀?cè)寬度為8份子?xùn)鸥駥挾龋划?dāng).mui-row像素寬度高于400px時，左側(cè)寬度為3份子?xùn)鸥駥挾龋覀?cè)寬度為9份子?xùn)鸥駥挾取?br>

項目中用到的效果是使用柵格系統(tǒng)布局首頁的多行兩列布局。

代碼示例：