本期我们继续通过#占位符完成我们的网格布局容器类，减少代码输出量。#containerpadding-right:15pxpadding-left:15pxmargin-right:automargin-left:auto.容器宽度：100%@extend#container@mediascreenand(min-width:$media-size-1)max-width:$media-size-box-1@mediascreenand(min-width:$media-size-2)max-width:$media-size-box-2@mediascreenand(min-width:$media-size-3)max-width:$media-size-box-3@mediascreenand(min-width:$media-size-4)max-width:$media-size-box-4&-fluidwidth:100%@extend#container基于浮动网格布局，jeet中函数参数比较多，我们只需要一个，包裹太高放不下。percentage可以用来获取百分比。.fa-gird+clearfix@for$i从1到12.is-#{$i}+column($i/12)@for$j从1到12&.offset-#{$j}margin-left:percentage($j/12)&.span@for$ifrom1through12.is-#{$i}+span($i/12)基于弹性的网格布局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从1到12.is-#{$i}width:percentage($i/12)@for$j从1到12&.offset-#{$j}margin-left:percentage($j/12)响应式添加响应式功能//响应式@for$ifrom1through12.fa-gird.is-media1-#{$i},.fl-gird.is-media1-#{$i}+media1宽度：百分比($i/12).fa-gird.is-media2-#{$i},.fl-gird.is-media2-#{$i}+media2宽度：百分比($i/12)。fa-gird.is-media3-#{$i},.fl-gird.is-media3-#{$i}+media3宽度：百分比($i/12).fa-gird.is-media4-#{$i},.fl-gird.is-media4-#{$i}+media4宽度：百分比（$i/12）
