layout - 用 sass 解决我的网格？

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）在每一列上使用填充来创建排水沟并在两侧平均添加。例如 padding: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;
 }