用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; 
}