Question

我不理解（任何）CSS框架中的网格嵌套。

我正在使用Foundation CSS框架和24个colum网格 - 一列= 4.16667％，两列 - 8.33333％，十二 - 50％等。

这是1920像素浏览器宽度的网格 - 左边部分= 10列（41.66667％），右边部分= 14列（58.33333％） - Codepen。

在右侧部分内有一个标题和一个内容块： enter image description here

标题有1列填充（在Foundation中称为«push»）：

<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这是5 in 14 columns不是一个整数，所以选择最接近它的那个（8或9列）。

但是，如果您想在60/7中确切地拥有24 columns即14*7 columns，那么您应该将整数作为10*7 colums 5*7columns并且178-column

您的网格应为70-columns，左侧为98-columns，右侧为35-columns 和98-columns网格中的35.17%。

更简单的方法是为5列网格编写自定义类以占用{{1}}

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和Foundation框架的grid.css文件中使用列类，因为它完全没用。

Answer 3

每个框架的工作方式都不同。

在Cascade Framework中，网格元素基本上只需要col类，您可以无限地嵌套col类。

为了容易实现无限嵌套，网格元素既没有填充也没有边距。为了在您的网页上提供一致的排水沟，您通常会使用col类作为内容的包装来补充cell类。

示例：

<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。

网格嵌套在CSS框架中

3 个答案: