将填充添加到容器内部

Question

我设计了一个使用978px作为网格宽度的布局，其中12px的网格填充。我从来没有真正理解网格填充的目的，说实话，现在我更加困惑，因为我认为网格填充将适用于我的总宽度内部所以事情不会停留在边缘网格。

例如，我的标题的背景颜色为#333。我跨越徽标部分3列，但它看起来不太好，因为它正好在边缘。如果我在标题内部添加12px的填充，显然会弄乱我的色谱柱流量。我尝试将它添加到span-columns mixin，如@include span-columns(3, 12, 12px 0px)，但填充太宽，我认为这不会有效，因为我想要它在左右两侧的所有内容。

那么在网格的里面获得填充的最佳方法是什么？

这是一个小结构：

page-wrapper (container)
 #page
  header#header
  main
  footer#footer

我尝试在#page-wrapper和#page div中添加填充，但这不起作用。

/ * ** * * 更新 * ** * * /

以下是我想要实现的目标的屏幕截图：

这是桌面布局，我想要响应，所以我想在整个布局中使用填充效果。基本上，屏幕截图中的网格总宽度为1002，侧面为12px，12- 54px列，11-30px排水沟。

这是一个烟火模板，所以我的320页是8列，27px宽，12px排水沟，10px排水沟宽度。我开始认为我设计错了，正如我之前提到的，我并不真正理解网格填充的重点。

正如你所看到的，我希望在容器的两侧有填充物，默认情况下一切都在边缘上。

以下是我设置的代码段：

$total-columns  : 8;
$column-width   : 27px;
$gutter-width   : 12px;
$grid-padding   : 10px;
$container-style: fluid;
$full: 747px 12;
$tablet: 747px 12 977px;
$desktop: 978px 12;

#page-wrapper{
@include container;
@include susy-grid-background;
@include at-breakpoint(747px 12 977px){
    @include set-container-width;
    max-width: 747px;
    @include susy-grid-background;
}
@include at-breakpoint(978px 12){
    @include set-container-width;
    max-width: 1002px;
    @include susy-grid-background;
}

现在这是我通过检查其他帖子所做的事情，它似乎有效，但我不确定这是否是正确的方法：

#header{
margin-left: -$grid-padding;
margin-right: -$grid-padding;
padding: 0 $grid-padding;
margin-bottom: 1em;
}

Answer 1

您的屏幕截图链接已损坏，但如果我理解正确，您只需要外部网格元素跨越网格填充。为此，我使用你提到的技术，虽然如果你想在网站上有太多的地方，手工操作可能会很痛苦。这是我创建的一个mixin，以灵活的方式处理这种“流血”：

@mixin bleed($padding: $grid-padding, $sides: left right) {
  @if $sides == 'all' {
    margin: - $padding;
    padding: $padding;
  } @else {
    @each $side in $sides {
      margin-#{$side}: - $padding;
      padding-#{$side}: $padding;
    }
  }
}

默认设置是向左右添加$grid-padding出血。您可以更改出血的大小，以及应该应用的侧面。你可以像这样申请：

#header { @include bleed; }
#nav { @include bleed($sides: left); }
#main { @include bleed($sides: right); }

你还有一些其他奇怪的代码。默认情况下，Susy构建了我称之为魔术网格的东西：具有最大宽度的流体。你不是在默认情况下允许这种情况发生，而是强迫你的网格完全流畅（$container-style: fluid;），包括set-container-width（如果你没有关闭它，它会设置最大宽度，但是现在对你没什么用处），然后手工添加最大宽度。

您还提到了不同尺寸的不同柱和装订线宽度。为此，您需要在断点内使用with-grid-settings。 e.g：

@include at-breakpoint($desktop){
  @include with-grid-settings(12,54px,30px,12px) {
    @include set-container-width;
    @include susy-grid-background;
  }
}