html - SASS 网格系统外部填充

Question

我已经在 SASS 中制作了这个自己的流体网格系统，但是有一个问题。

我已经将 padding-left 和 padding-right 都设置为 20px，这是间距宽度(每个间距之间的间距专栏)。

一切正常，但是 行 中的第一个和最后一个 column 也在外侧设置了 padding。我想避免这种情况，但我不知道我必须为此做些什么计算。

网格目前看起来像这样:(红色间距是我要删除的)

系统代码如下所示:

@import "../../mixins/cross-browser-elements/_box";

$column-count: 12 !default;
$gutter-width-px: 20px !default;
    
@function calculate-column-width($index) {
  @if ($index > 0) {
    @return percentage($index / $column-count);
  }
}

.row {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 20px;

  > .column {
    float: left;
    min-height: 1px;
    padding-left: ($gutter-width-px / 2);
    padding-right: ($gutter-width-px / 2);
    @include box-sizing(border-box);


    @for $index from 1 through $column-count {
      &.size-#{$index} {
        width: calculate-column-width($index);
      }
    }
  }

}

我尝试的只是添加这段代码:

&:first-child {
  padding-left: 0;
}

&:last-child {
  padding-right: 0;
}

这段代码下

> .column {
    ......

但这只会使该行的第一列和最后一列在左侧和右侧变大一些。

Answer 1

为什么不在“.row”的左侧和右侧添加 20px 的负边距？

.row {
  margin: 0 -20px 20px;
  ...
}