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および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;
}
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 に答える