这一期我们继续完成我们的网格布局

容器类

通过一个 # 占位符，来减少代码输出量。

#containerpadding-right: 15pxpadding-left: 15pxmargin-right: automargin-left: auto.containerwidth: 100%@extend #container@media screen and (min-width: $media-size-1)max-width: $media-size-box-1@media screen and (min-width: $media-size-2)max-width: $media-size-box-2@media screen and (min-width: $media-size-3)max-width: $media-size-box-3@media screen and (min-width: $media-size-4)max-width: $media-size-box-4&-fluidwidth: 100%@extend #container
复制代码

基于浮动的网格布局

jeet 里面的函数参数挺多的，我们只用一个即可，封装的太高了，不太好契合。percentage 可以用来得到百分比。

.fa-gird+clearfix@for $i from 1 through 12.is-#{$i}+column($i/12)@for $j from 1 through 12&.offset-#{$j}margin-left: percentage($j / 12)&.span@for $i from 1 through 12.is-#{$i}+span($i/12)
复制代码

基于 flex 的网格布局

row 代表单行结构。下面的一些键盘组合代表的方位，比如 jk ，先按 j 再按 k，代表着从左往右，而 kj 则从右往左，jn 和 nj 类似。

而主轴对齐方式用到了 tyuio 几个字母，u 在中间所以代表居中，t 左边，o 右边，tuo 代表元素之间有间隔，yui 代表开始结束的也有间隔。副轴的我就没有继续添加了。

.fl-girddisplay: flexflex-wrap: wrap&.rowflex-wrap: no-wrap&.kjflex-direction: row-reverse&.jnflex-direction: column&.njflex-direction: column-reverse&.ujustify-content: center&.tjustify-content: flex-start&.ojustify-content: flex-right&.tuojustify-content: space-between&.yuijustify-content: space-around@for $i from 1 through 12.is-#{$i}width: percentage($i / 12)@for $j from 1 through 12&.offset-#{$j}margin-left: percentage($j / 12)
复制代码

响应式

添加响应式功能

// 响应式
@for $i from 1 through 12.fa-gird .is-media1-#{$i},.fl-gird .is-media1-#{$i}+media1width: percentage($i / 12).fa-gird .is-media2-#{$i},.fl-gird .is-media2-#{$i}+media2width: percentage($i / 12).fa-gird .is-media3-#{$i},.fl-gird .is-media3-#{$i}+media3width: percentage($i / 12).fa-gird .is-media4-#{$i},.fl-gird .is-media4-#{$i}+media4width: percentage($i / 12)
复制代码