CSS框架中的網格嵌套

Question

我不明白（任何）CSS框架中的網格嵌套。

我使用24式柱網格Foundation CSS框架 - 一列= 4.16667％，二 - 8.33333％，12 - 50％，等等

這是我1920像素瀏覽器寬度格 - 左部分= 10欄（41.66667％），右欄= 14欄（58.33333％） - Codepen。

內右側有一個標題和內容塊：

標題有1個填充（在基金會它被稱爲«推»）：

<div class="row small-padding-horizontal-1 medium-padding-horizontal-1 large-padding-horizontal-1 xlarge-padding-horizontal-1 xxlarge-padding-horizontal-1">…</div> 

- 正如你看到附加的圖像標題不適合網格。

內容塊5列寬：

<div class="small-5 medium-5 large-5 xlarge-5 xxlarge-5">…</div> 

- 正如你所連接的圖像上看到這個塊不符合格 - 它不是5列寬。

這是絕對正確和明顯的 - 右區塊寬度爲58.33333％，所以所有內區塊的寬度百分比都會根據此區塊寬度計算，而不是整個窗口寬度。

我的問題是 - 我如何適合嵌套塊內的父塊內的網格？

Codepen

Answer 1

響應框架與父母的div％的寬度工作..

計算根據您的需要是有點棘手和雜亂的時間。

如果你看看你的要求，你希望5 column在14-column網格。

要做到這一點，你應該做這樣的計算。

你14-column現在24-column而嵌套所以5-columns in 14-columns佔據35.174%。考慮24 columns的空間，這將是8.57 columns這是不是一個整數，以便選擇一個最接近它（8或9列）。

但是，如果你想到底有沒有5 in 14 columns即60/7在24 columns，你應該有一個整體數字給你.. 14*7 columns10*7 colums和5*7columns

網格應178-column與70-columns左，98-columns向右 和35-columns內部的98-columns網格。對於5列格

更簡單的方法寫自定義類佔據35.17%

Answer 2

好，CSS框架僅提供第一級塊網格 - 所有嵌套塊應手動計算，以適應頂層網格。

這是紅塊，以適應主電網計算（右容器也改變取決於屏幕分辨率的列數）：

@media screen and (max-width: 1920px) { width: (5/14 * 100 + 0%); } /* width — 5 columns, parent container — 14 columns -> 35.7% */ 
@media screen and (max-width: 1440px) { width: (7/18 * 100 + 0%); } /* width — 7 columns, parent container — 18 columns -> 38.88 */ 
@media screen and (max-width: 1280px) { width: (7/18 * 100 + 0%); } /* width — 7 columns, parent container — 18 columns */ 
@media screen and (max-width: 1024px) { width: (10/22 * 100 + 0%); } /* width — 10 columns, parent container — 22 columns */ 
@media screen and (max-width: 640px) { width: (16/24 * 100 + 0%); } /* width — 16 columns, parent container — 24 columns */ 

所以，我在HTML和地基沒有更多的使用列班框架的grid.css文件，因爲它完全沒用。

Answer 3

事情對於每個框架都有不同的工作方式。

在Cascade Framework中，一個網格元素基本上只需要col類，並且您可以無限嵌套col類。

爲了方便地進行無限嵌套，網格元素既沒有填充也沒有邊距。爲了在您的頁面上保持一致的排版，您通常會使用cell類作爲內容的封裝來補充col類。

實施例：

<div class="col width-1of2"> 
    <div class="col width-1of2"> 
     <div class="cell"> 
      [Content] 
     </div> 
    </div> 
    <div class="col width-fill"> 
     <div class="col width-1of3"> 
      <div class="cell"> 
       [Content] 
      </div> 
     </div> 
     <div class="col width-1of3"> 
      <div class="col width-3of5"> 
       <div class="cell"> 
        [Content] 
       </div> 
      </div> 
      <div class="col width-fill"> 
       <div class="cell"> 
        [Content] 
       </div> 
      </div> 
     </div> 
     <div class="col width-fill"> 
      <div class="cell"> 
       [Content] 
      </div> 
     </div> 
    </div> 
</div> 
<div class="col width-fill"> 
    <div class="col width-1of4"> 
     <div class="cell"> 
      [Content] 
     </div> 
    </div> 
    <div class="col width-fill"> 
     <div class="col width-2of3"> 
      <div class="cell"> 
       [Content] 
      </div> 
     </div> 
     <div class="col width-fill"> 
      <div class="cell"> 
       [Content] 
      </div> 
     </div> 
    </div> 
</div> 

參見this demo和official documentation。