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

Question

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

以下是我的全局设置:

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

根据关于静态站点的Susy 2.0文档,我将容器设置为auto,我让列宽设置决定了我的容器元素的宽度.

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

这样做的最佳方法是什么？如果我只是将padding-left和padding-right(在纯CSS中)应用于我的容器元素,这会破坏网格.容器不再宽,不足以包含Susy的列宽计算.

我在CSS中将'box-sizing'普遍设置为'border-box'.如果我在容器元素上使用'content-box'覆盖它,那么网格行为正确.我原本期望相反吗？

解决方案是将'box-sizing:content-box'应用于我的容器元素吗？或者在Susy中有一个设置我可以申请我失踪了吗？我觉得可能有.如果可能的话,我宁愿让Susy处理所有网格计算.

我的问题也适用于响应/流体设计,因为即使我给容器设置一个特定的宽度并删除'列宽'和'数学'设置,我仍然有同样的问题.

Answer 1

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

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