CSS框架中的网格嵌套答案

【问题标题】：Grid nesting in CSS-frameworksCSS框架中的网格嵌套
【发布时间】：2014-12-30 10:13:03
【问题描述】：

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

我正在使用带有 24 列网格的 Foundation CSS 框架 - 一列 = 4.16667%，二 - 8.33333%，十二 - 50%，等等。

这是我的 1920 像素浏览器宽度的网格 — 左侧部分 = 10 列 (41.66667%)，右侧部分 = 14 列 (58.33333%) — Codepen。

在右边部分有一个标题和一个内容块：

标题有 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

【问题讨论】：

你介意链接到小提琴吗？
Codepen — 在那里你可以看到 1920px 的网格。
你想装什么？ 14 列中的 5 列网格？
是的，我想让 5 列块在右侧 14 列块内成为真正的 5 列 — 查看屏幕截图并与灰色的 24 列网格进行比较 — 5 列块看起来不像 5 列。
这不是网格框架的工作方式。它们总是会从包含元素的宽度中获取宽度。

标签： twitter-bootstrap grid zurb-foundation css-frameworks cascade-framework

【解决方案1】：

响应式框架使用父 div 的 % 宽度..

根据您的需求进行计算有时会有点棘手和混乱。

如果您查看您的要求，您希望将5 column 放入14-column 网格中。

要实现这一点，您应该进行这样的计算。

您的14-column 现在是24-column，而嵌套时5-columns in 14-columns 占据了35.174% 的空间。考虑到24 columns 这将是8.57 columns，这不是一个整数，所以选择最接近的那个它（8 或 9 列）。

但是，如果您想在24 columns 中准确地拥有5 in 14 columns 即60/7，您应该将其作为一个整数给您.. 14*7 columns 10*7 colums 和5*7columns

你的网格应该是178-column，左边是70-columns，右边是98-columns 和35-columns 在98-columns 网格内。

更简单的方法为 5 列网格编写自定义类以占用 35.17%

【讨论】：

@artuska LCM 所有网格值..:P

【解决方案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 文件中使用列类，因为它完全没用。

【讨论】：

【解决方案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。

【讨论】：