1

我设计了一个布局，使用 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和#pagediv 添加填充，但这不起作用。

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

这是我要实现的目标的屏幕截图：

截屏

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

这是一个烟花模板，所以我的 320 页面是 8 列、27 像素宽、12 像素间距和 10 像素间距宽度。我开始认为我设计错了，正如我之前提到的，我并不真正理解网格填充的意义。

如您所见，我希望在容器的侧面有填充物，默认情况下所有东西都位于边缘。

这是我设置的代码片段：

$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;
}
4

1 回答 1

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 。例如：

@include at-breakpoint($desktop){
  @include with-grid-settings(12,54px,30px,12px) {
    @include set-container-width;
    @include susy-grid-background;
  }
}
于 2012-09-02T19:44:16.280 回答