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。