960流体グリッドの設計上の瑕疵またはそれを悪用していますか？

Question

私はS tephen Bau's 960 fluid gridを使用していますが、私はそれを使用しない限り、各グリッドは親の％であるため、ネストされたグリッドで動作するとは思わないでしょうか？

スタイルシートで

.grid_12 { width:98%, } 

ビューポートが1200px次いで<ヘッダ/ >が1176pxであるのであれば、その後、ネストされた< NAV/>グリッドは、それはそれ1152.48px製造の98％である - それがあった場合通常の960固定グリッドの両方がこれはどのようにこの（および他のほとんどの）流体グリッドが動作し、以来、彼らは維持する必要があり、よく、流体。のちょうど制限されているのと同じ幅

<div id="wrap" class="container_12"> 
    <header class="grid_12"> 
     <div id="logo" class="grid_6 alpha"> 
      .. logo img ... 
     </div> 
     <div id="uti" class="grid_5 prefix_1 omega"> 
     .. util menu ... 
     </div> 
    <nav class="grid_12"> 
     .. nav list .. 
    </nav> 
    </header> 
    <div id="content class="grid_12"> 

     <div id="main-content" class="grid_12 clearfix"> 

      <div id="col-1" class="grid-9 alpha"> 

       </div> 
       <div id="col-2" class="grid-3 omega"> 

       </div> 

     </div> 

    </div> 

    <footer class="grid_12 clearfix"> 

    </footer> 

</div> 

Answer 1

だろう

実際には、ネストされたグリッドをコンテナに入れたり、幅を100％にリセットするCSSクラスを作成したりすることができます（たとえば、.grid_fullという名前です）。エレメントがその親を満たすように.alphaおよび.omegaと組み合わせてもしなくてもよい）。

実際には、これらのグリッドは、CSSレイアウトとテンプレートの標準が発展し、牽引力を発揮するまでは、ストップギャップです。

Answer 2

私は最近同様の問題に直面しました。同様の問題を抱えている人は誰でも答えを見つけることができます。 行のネストされたすべてのグリッドは、合計で12（またはグリッドシステムに応じて16または24）の合計にする必要があります。

たとえば、「grid_1」、「grid_5」、「grid_6」のように、最大​​12個のグリッドが必要です。

これは、pull_iとpush_iの行の「レンガ」を並べ替えたり、ソースコードの順序を変更するためだけのものではないことが考えられます。 コンテナグリッドは、grid_iクラスのいずれでもかまいません。この例では、grid_7！ あなたが損失なしでコンテナを必要とする場合は、1作成：ピクセル単位で

.container_12 .full { 
width:100%; 
} 

実際の幅：親グリッドのすべての子が子％※（PXで親幅）/ 100ピクセルの幅を持っています。したがって、この例では "grid_1" = 6.25 *（実際の "grid_7"はpx）/ 100ピクセルです。

もちろん、これらすべてにはコストがかかります。私たちがhtmlタグをセマンティクスからレイアウト定義にグループ化することによって、-in理論 - 私たちはこれが欲しくない！ 理想的なのは、 "group_1"、 "group_2"のような魔法を行うクラスを追加することですが、壁に当たってしまいます。

私の答えはhereです。