0

I have a 5 column grid from Susy2 and Sass where the header and footer should be 100% the width of the body (for a full bleed effect) but their content should still use the grid's gutters.

Here's some sample markup:

<header>Lorem ipsum dolor sit amet</header>

<div id="main">
  <p>Quia blanditiis ...</p>
  <p>Nostrum iure reprehenderit...</p>
</div>

<div id="sidebar">
  <p>Eveniet, aut, dolorum, adipisci dolor ...</p>
</div>

<footer>Hi mom</footer>

And here's the Sass and Susy that I've written:

@import "susy";

$susy: (
  columns: 5,
  gutters: 1/10,
  output: float,
  gutter-position: split,
  container: auto
);

body { @include container; }

header, footer {
  @include span(5);
  @include bleed();
  color: white;
  background-color: grey;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#main {
  @include span(3);
  outline: solid red 1px;
}

#sidebar {
  @include span(2);
  outline: solid yellow 1px;
}

Here's a Codepen demo: http://codepen.io/KatieK2/pen/xbdVbJ?editors=110

The problem is that header and footer have a small margin on their right sides, and they don't use any gutter spacing in the inside. How can I get them to be the full width of the container, and include the gutter as padding?

4

1 に答える 1

1

分割ガターと全幅コンテナを使用しているため、bleedやり直す必要はありません。Susy の助けがなくても、ヘッダーとフッターの両方がデフォルトでエッジに流れます。ガターを追加insideしてコンテンツをグリッドに戻すだけです。

header, footer {
  @include gutters(inside);
}

他の Susy コードは必要ありません。spanと の両方を削除しbleedます。

于 2015-01-20T08:41:21.990 に答える