グリッド幅として 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
およびdiv にパディングを追加しようとしました#page
が、うまくいきませんでした。
/ * ** * *更新* ** * * /
ここに私が達成しようとしているもののスクリーンショットがあります:
これはレスポンシブが必要なデスクトップ レイアウトなので、パディング効果はレイアウト全体で同じにしたいと考えています。基本的に、スクリーン ショットのグリッドは合計 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;
}