布局排板大板型左右留邊 Container

接下來就是這個Container裏頭需要載運那些內容了

material-ui 及許多框架都很用英文直翻 在貨櫃裡塞栅格

今天的內容就是 Grid (栅格)

顧名思義就是一格一格排好 有延展性可以RWD

這個柵格可主要可以分12格

基本用法如下

<Grid container spacing={2}>
 <Grid item xs={6} md={8}>
   <Item>xs=6 md=8</Item>
 </Grid>
 <Grid item xs={6} md={4}>
   <Item>xs=6 md=4</Item>
 </Grid>
 <Grid item xs={6} md={4}>
   <Item>xs=6 md=4</Item>
 </Grid>
 <Grid item xs={6} md={8}>
   <Item>xs=6 md=8</Item>
 </Grid>
</Grid>

在滿板時
也就是md 左格12分之8 右邊12分之4
在半版 xs 則變成各半分 12/6
達到 不同寬度有不同的排版方式

另外spacing 代表的是 每個Grid中間的等分寬度

可以從0~寫到12

所以基本板型的RWD Grid 就可以排列出來了

Day4