將填充添加到容器內部

Question

我設計了一個使用978px作爲網格寬度的佈局，使用12px的網格填充。說實話，我從來沒有真正理解網格填充的目的，現在我更加困惑，因爲我認爲網格填充將適用於我的總寬度的內部，所以事情不會停留在網格。

例如，我的標題背景顏色爲#333。我跨越了徽標部分的3列，但它看起來不太好，因爲它正好位於邊緣。如果我在標題的內部添加12像素的填充，顯然會弄亂我的列流。我嘗試將它添加到span-columns mixin中，如@include span-columns(3, 12, 12px 0px)，但填充過寬，我認爲這不會有效，因爲我會在左右兩邊的所有內容中使用它。

那麼什麼是內網​​填充填充最好的方法是什麼？

這裏是一個小結構：

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

我嘗試添加填充到#page-wrapper和#page div的，但這並沒有工作。

/* ** * * UPDATE * ** * */

這裏是什麼，我想實現一個屏幕截圖：

這是桌面佈局，我想resp onsive，所以我希望在整個佈局中的填充效果相同。基本上，屏幕截圖中的網格總寬度爲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。例如：

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