/**
* Flying Swing Grids Layout, rewrite to less by yiminghe@gmail.com
*
* @author lifesinger@gmail.com
*/

@import "mixins.less";

/** 布局基础样式 **/
.col-main {
    float: left;
    width: 100%;
    min-height: 1px; // bug fix: 主栏没有内容时，在 Firefox 和 Chrome 等浏览器下，布局不对
}

.col-sub, .col-extra {
    float: left; //position: relative;  按需设置，仅在需要时添加
}

//清除浮动
.layout, .main-wrap, .col-sub, .col-extra {
    .ks-clear_();
}

/*
淘宝采用了 6 种栅格布局：
950                  .grid-m
190    750           .grid-s5m0
750    190           .grid-m0s5
190    510    230    .grid-s5m0e6
230    510    190    .grid-e6m0s5
510    230    190    .grid-m0e6s5
*/

/** 两栏布局 **/
.grid-s5m0 .main-wrap {
    margin-left: 200px;
}

.grid-s5m0 .col-sub {
    width: 190px;
    margin-left: -100%;
}

.grid-m0s5 .main-wrap {
    margin-right: 200px;
}

.grid-m0s5 .col-sub {
    width: 190px;
    margin-left: -190px;
}

/** 三栏布局 **/
.grid-s5m0e6 .main-wrap {
    margin: 0 240px 0 200px;
}

.grid-s5m0e6 .col-sub {
    width: 190px;
    margin-left: -100%;
}

.grid-s5m0e6 .col-extra {
    width: 230px;
    margin-left: -230px;
}

.grid-e6m0s5 .main-wrap {
    margin: 0 200px 0 240px;
}

.grid-e6m0s5 .col-sub {
    width: 190px;
    margin-left: -190px;
}

.grid-e6m0s5 .col-extra {
    width: 230px;
    margin-left: -100%;
}

.grid-m0e6s5 .main-wrap {
    margin-right: 440px;
}

.grid-m0e6s5 .col-sub {
    width: 190px;
    margin-left: -190px;
}

.grid-m0e6s5 .col-extra {
    width: 230px;
    margin-left: -430px;
}
