Question

我使用的是Susy 2.0。我正在构建一个固定宽度的站点（将在后期阶段响应）。但是，我认为我的问题适用于使用Susy作为静态或流体。

以下是我的全局设置：

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: static, 
 gutters: 1/3,
);

根据关于静态网站的Susy 2.0文档，我将容器设置为自动，并且我允许列宽设置决定容器元素的宽度。

我想在容器上应用一些左右填充，这样当视口在移动设备上变窄时，两侧都会有一点呼吸空间。

最好的方法是什么？如果我只是将padding-left和padding-right（在纯CSS中）应用于我的容器元素，这会破坏网格。容器不再宽，不足以包含Susy的列宽计算。

我有＆＃39; box-sizing＆＃39;普遍设置为边界框＆＃39;在我的CSS中。如果我在容器元素上使用＆＃39; content-box＆＃39;覆盖它，则网格行为正确。我实际上期待相反的事情吗？

解决方案是否应用＆＃39;框大小调整：内容框＆＃39;到我的容器元素？或者在Susy中有一个设置我可以申请我失踪了吗？我觉得可能有。如果可能的话，我宁愿让Susy处理所有网格计算。

我的问题也适用于响应/流体设计，因为即使我给容器设置一个特定的宽度并删除了“列宽”，我仍然会遇到同样的问题。和＆＃39;数学＆＃39;设置。

Answer 1

目前，在容器上设置content-box并添加自己的填充是最好的方法。虽然border-box对大多数事情更为明智，但有时content-box才有意义，而且我认为这是一个很好的例子。它的工作原理是因为Susy设置了容器宽度，并且填充将添加到其中，而不是被减去，这意味着您仍然拥有网格所需的空间。

我愿意再次考虑某种类型的grid-padding功能，但在Susy 1中，似乎它引起的问题多于它解决的问题。我将不得不通过更好的方式来思考。如果你有想法，我总是感兴趣！

Answer 2

对于网格填充，我通常会做这样的事情。效果很好，不需要进一步的复杂化：）

.container {
  @include container($susy); 
  padding-left: 15px; 
  padding-right: 15px; 
}

Answer 3

一般情况下，您需要添加关键字＆＃34; static＆＃34;到容器，它给你一个静态网站，但你需要包括＆＃34;数学：流体＆＃34;设置为您提供基于百分比的网站。否则，正如您在问题中提到的那样，＆＃34;容器不再宽，不足以包含Susy的列宽计算＆＃34;。

Susy设置

您仍然可以拥有基于边框的网站。将global-box-sizing：border-box添加到设置中。你还需要改变＆＃34; math：static＆＃34; to＆＃34; math：fluid＆＃34;这样你的所有单位都是百分比。

边框包含

添加＆＃34; @include border-box-sizing;＆＃34;在@suzy设置之外。您可能必须在＆＃34; @import＆＃34;指南针＆＃34 ;;＆＃34;

中包含指南针

<强>容器

你需要包含＆＃34;静态＆＃34;作为参数。容器采用＆＃34;布局＆＃34;参数（http://susydocs.oddbird.net/en/latest/toolkit/#container）。＆＃34;布局＆＃34;变量由关键字（http://susydocs.oddbird.net/en/latest/shorthand/#shorthand-layout）组成。＆＃34;关键字＆＃34;包括＆＃34;静态＆＃34; （http://susydocs.oddbird.net/en/latest/shorthand/#term-keywords）。

完整示例

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: fluid,
 global-box-sizing: border-box,
 gutters: 1/3
);

@include border-box-sizing;

.container {
     @include container(static);
     padding: 1%;
}

现在可以在不破坏网站的情况下将填充添加到容器或任何其他元素。

Answer 4

如果您可以在容器宽度本身的相同模式（相对或固定）中添加一些边距，则可以减小容器的宽度，并使用margin: 0 auto将其置于其父级中心。

像这样，每边有5％的填充：

.my-container {
    @include container(90%);
    margin: 0 auto;
}

如果Susy支持CSS函数作为容器宽度，即使使用相对容器宽度也可以使用固定数量的像素，例如每边10px：

.my-container {
    @include container(calc(100% - 20px));
    margin: 0 auto:
}

不幸的是，这不起作用。当然，如果你可以在容器周围添加一个包装div，你可以在那里设置宽度和边距并使用container(100%)。

如何在Susy 2.0中向容器添加左右填充

4 个答案: