[Day 4] 排版布局Grid

布局排板大板型左右留边 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