Question

帮助生成自定义的栅格布局。 效果可以参考测试用的示例。

依赖于：

• variables
• util

• .make-row()

  创建栅格外部容器。

  • .make-row()

    body {
    .make-row();
    }

    body {
    *zoom: 1;
    }
    
    body:before,
    body:after {
    display: table;
    content: "";
    }
    
    body:after {
    clear: both;
    }
    

    不需要再自行调用 .clearfix()。

• .make-column()

  创建栅格单列容器。

  • .make-column(@ratio, @gutter, @offset)

    @ratio

    单列的比例，如 1/3。

    @gutter

    间隔宽度占全部宽度的百分比。可选，默认值为 @default-column-gutter。

    @offset

    偏移量。可选，默认为 0。

    main {
    .make-column(2/3, 5%);
    }
    
    aside {
    .make-column(1/3, 5%);
    }

    main {
    display: block;
    float: left;
    width: 65%;
    margin-left: 5%;
    }
    
    main:first-child {
    margin-left: 0%;
    }
    
    aside {
    display: block;
    float: left;
    width: 30%;
    margin-left: 5%;
    }
    
    aside:first-child {
    margin-left: 0%;
    }
    

    适用于按百分比的流式栅格布局。

  • .make-column(@ratio, @gutter, @total, @offset)

    @ratio

    单列的比例，如 1/3。

    @gutter

    间隔宽度值，不能填写百分比。

    @total

    总宽度值，不可使用百分比。

    @offset

    偏移量。可选，默认为 0。

    main {
    .make-column(2/3, 15px, 960px);
    }
    
    aside {
    .make-column(1/3, 15px, 960px);
    }

    main {
    display: block;
    float: left;
    width: 635px;
    margin-left: 15px;
    }
    
    main:first-child {
    margin-left: 0px;
    }
    
    aside {
    display: block;
    float: left;
    width: 310px;
    margin-left: 15px;
    }
    
    aside:first-child {
    margin-left: 0px;
    }
    

    适用于按非百分比的栅格布局。

  栅格左右两侧是否有间隔取决于 @column-justify-content。