960.gsのようなCSSグリッドシステムにパディングを追加

Question

私は人気のある960.gs 16列のグリッドシステムを利用するサイトを構築しています。ここでは上に重ねグリッド列で、設計の関連部分のスクリーンショットです：

問題は白「人気の今」のボックスです。これは白い背景を持っているので、ボックスの中にいくつかのパディングが欲しいです。十分に単純です：<div>を親の内側に追加し、padding: 10pxと白い背景で適切にスタイルを設定しました。

この問題は、「内側」の内側のグリッドを再利用しようとすると発生します。<div>このようにします。その白いボックスの中に、リンクリストを5列のコンテナに入れ、3列のコンテナに画像を入れたい（残念ながら、スクリーンショットにはこのサイズでは表示されません）。

.innerクラスの中でグリッドの列サイズを再定義しようとしました。各列のサイズから10ピクセルを削除しました。余白を考慮するには、合計幅は20ピクセル以下にする必要があります。これは、.innerコンテナ内に正確に2つの子<div>sが存在する場合に機能しますが、明らかに2つ以上または2つ未満のものが存在する場合は間違って見えます。

誰かがこの種のことに対処するための良い戦略を持っていますか？背景色にかかわらず、すべての列にパディングを入れても構いませんが、グリッドをハッキングしたときと同じようにこのパディングを取得できませんでした。

おかげ マット

Answer 1

960gsは、ネスティングを可能にするための.alphaと.omegaクラスがあります。通常これにより、適用先の要素から10pxのマージンと10pxのマージンが削除されます。私はこれをテストしていません

<div class="container_12"> 
    <div class="grid_12"> 
    <div class="grid_5 omega">...</div> 
    <div class="grid_3 alpha">...</div> 
    </div> 
</div> 

を全体の列幅は、最大追加することになりますが、パディングは「間違った」側になります - あなたはこれらを逆にし、あなたが必要パディングを与えるためにそれらを誤用することができるかもしれませんしかしそれはそれが働くことを確信していません