用sass解决我的Grid问题？

Question

我一直在试图解决我的网格，我不知道为什么我的列不堆叠在一起。当我提出一个div容器和里面一排，然后12列列正在整个宽度，则跑马圈地下面

$screen-width: 1147px; 
$number-of-columns: 12; 
$gutter: 30px; 
$column-width: $screen-width/$number-of-columns; 
$padding: $gutter/2; 
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1)); 
$gutter-width:($gutter/$total-width) * 100%; 


@for $i from 1 through $number-of-columns { 
    .column-#{$i} { 
    width: ($i /$number-of-columns) * 100%; 
    background:#ccc; 
    float: left; 
    margin-left: $gutter; 
    } 
} 



@mixin clearfix() { 
    &:before, 
    &:after { 
    content: " "; // 1 
    display: table; // 2 
    } 
    &:after { 
    clear: both; 
    } 
} 
// Set Base Container 
.container { 
    max-width:$total-width; 
    margin:0px auto; 
    padding: 0 $padding 0 $padding; 
    background: blue; 
    @include clearfix; 
} 
.row { 
    width: 100%; 
    margin: 0; 
    background: green; 
    @include clearfix; 
} 

Answer 1

你被列数除以可用空间，但随后您在每列的左侧添加了一个边距因此，如果您有10列，则每列是总宽度+排水沟的10％。这增加了超过100％，并将你的三列推到下一行。

大多数电网系统解决这两种方式中的一个...

A）使用CSS计算（）由按列然后扣除沟槽的数目除以空间来计算每个列的宽度。例如。 calc（10％ - 30px）; B）在每一列上使用填充来创建排水沟并在两侧平均添加它。例如。填充：0 15px;这会给你一个列的均匀分布，不需要计算，但缺点是你需要在你的容器的每一边需要-15px的边距来容纳它，并且你需要在每一列中添加一个额外的HTML标签。

Answer 2

所以我设法添加到一个函数，但现在我留下了似乎正在发生的边界，我不知道为什么会这样，我试过了，比如在行上放一个负边距。

$screen-width: 2147px; 
$number-of-columns: 12; 
$gutter: 30px; 
$column-width: $screen-width/$number-of-columns; 
$padding: $gutter/2; 
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1)); 
$gutter-width:($gutter/$total-width) * 100%; 



@function grid-width($cols, $has-gutter:false) { 
@if $has-gutter { 
    @return calc(((100%/#{$number-of-columns}) * #{$cols}) - #{$gutter}); 
} 
@else { 
    @return calc((100%/#{$number-of-columns}) * #{$cols}); 
} 
} 

@for $i from 1 through $number-of-columns { 
    .column-#{$i} { 
    width: grid-width(#{$i}, true); 
    background:#ccc; 
    display: inline-block; 
    margin-left: $gutter; 
    float: left; 
    } 
} 



@mixin clearfix() { 
    &:before, 
    &:after { 
    content: " "; // 1 
    display: table; // 2 
    } 
    &:after { 
    clear: both; 
    } 
} 
// Set Base Container 
.container { 
    max-width:$total-width; 
    margin: 0px auto; 
    height:100px; 
    background: blue; 
    @include clearfix; 
} 
.row { 
    width: 100%; 
    height:50px; 
    background: green; 
    @include clearfix; 
}