css - Susy グリッドのセクションのフルサイズの背景

Question

Susy グリッド システムで次のようなものを作成したい:

異なる色は、Web サイトの異なるセクションとその背景色を示しています。垂直線はグリッド列です。

シンプルなグリッド コンテナーを使用する場合、グリッド内の div 内でのみ背景色を設定できますが、背景色を Web サイトの左端と右端に引き延ばしたいと考えています。コンテンツはグリッド内にとどまります。

複数のグリッド コンテナー (セクションごとに 1 つ) を使用するソリューションを見つけましたが、このアプローチは推奨されないと聞きました。

また、流動的なグリッド コンテナーも使用したくありません。

Answer 1

私は同様の問題を扱っていました。私は次のアプローチを使用していましたdiv。各セクション内に (「コンテンツ」と呼びましょう) を配置します。

コンテナー クラスを「コンテンツ」div に適用します。.content{@include container;} このように、セクションの背景色を設定すると、ページの幅全体に広がり、セクション内のコンテンツはグリッドのルールに従います。

それが理にかなっていることを願っています。