是否有一个CSS网格框架可容纳嵌套的可视框？

Question

我一直在使用项目上的BluePrint.css框架。它运作良好。

但是，就像我看到的大多数CSS框架一样，它似乎更多地适用于文本沉重的报纸式样布局。当使用它构建使用SharePoint或iGoogle等“小部件”隐喻的Web应用程序时，它会变得更加难以使用。关键问题是在Web应用程序中，创建信息的可视容器通常是标准的。这引入了一个需要填充的盒子，最终打破了网格。

另一种解释方法是，如果您的容器盒跨越8个网格列，则您将无法在其中放置8个网格列，因为容器盒具有填充。

我已经找到了解决方法，但它们都需要添加另一层会变得有点麻烦的CSS。在继续下一个项目之前，我想我会看看是否有其他人遇到过这个问题，并且a）发现了一个满足这个视觉要求的网格系统，或者b）找到了一些巧妙的方法来适应这个问题现有的CSS框架。

Answer 1

@roberkules问我是否想出了一个解决方案，我们做了。有点。至少，它在当时是有用的。我一直想写一篇博客文章很长一段时间，但从来没有涉及到它，所以我会尝试在这里总结答案。

总的来说，我们做了两件事。 1，我们添加了通过在不打断网格的情况下给出'.span-x'边框来创建'盒子'的功能。在图2中，我们将标准的24列结构细分为更细的细节，将“半”和“四分之一”测量的概念添加到网格系统。

要创建接壤容器盒，我们增加了一类名为span-border（我们一直与蓝图跨度-X的语法尽可能我们可以用我们自己添加）：

注意：所有的例子都是基于我们网格宽25px，宽度为15px（每个跨度为40px）。

div.span-border { 
margin-left: -1px; 
margin-right: 14px; 
border-width: 1px; 
border-style: solid; 
} 

所以，无论何时我们想创建一个带边框的容器，我们都可以添加该类。例如：

<div class="span-8 span-border">our box</div> 

这给了我们一个8列的有边框。目标是让开发人员在那里创建仍然使用蓝图网格CSS的元素，这样我们就不会为页面上的每个小框创建新的CSS。

比方说，我们想要在该框内的两列。一个比另一个窄。我们可以放入一个跨度为3和跨度为5的，他们会适合，但他们会碰到盒子边缘，那会很丑。

所以，我们所做的是增加了一些-half和-quarter风格舒展使用网格的分数事情。

实施例的CSS：

.pad-1 { 
padding: 20px; 
} 

此添加填充到div的20像素周围的一切，其中，水平= '1' 格栅40像素的单元。因此，让我们重新写我们的信箱HTML这样：

<div class="span-7 pad-1 span-border">our box</div> 

我们的盒子仍然占据了8蓝图网格单元为7 + 1 = 8，所不同的是8个单位的内容空间，而不是，我们现在有7作为一个完整的单位，即用于填充。

我们现在可以中添加我们的栏目：

<div class="span-7 pad-1 span-border"> 
    <div class="span-3">left column</div> 
    <div class="span-4 last">right column</div> 
</div> 

瞧！现在我们启用Blueprint来处理嵌套元素的概念。

有了这个系统，你可以无限地嵌套，如果需要的话。

随着时间的推移，我们只是调整了一些东西来适应新的情况。例如，我们最终需要将具有奇数个网格列的元素分成两个相等的列。为此，我们添加的stretch-x概念：

.span-1.stretch-half {width:45px;} 

.span-1通常是25像素宽（40像素 - 15px的右边缘）。现在我们已经将它拉伸了整个网格单位的1/2（20px）。

我们会做到这一点对所有的现有跨度-X设置：

.span-2.stretch-half {width:85px;} 
.span-3.stretch-half {width:125px;} 
.span-4.stretch-half {width:165px;} 
... 
.span-23.stretch-half {width:925px;} 

现在回到我们最初的例子中，我们可以创建两个相等的嵌套列，例如：

<div class="span-7 pad-1 span-border"> 
    <div class="span-3 stretch-half">left column</div> 
    <div class="span-3 stretch-half last">right column</div> 
</div> 

3 + 3 + half + half = 7.

所以，这就是我们想到的。它随着时间的推移对我们运作良好。初步弄清楚和调整你的需求是一件很痛苦的事情，但是一旦建立起来，它使得快速原型设计变得非常简单，并且可以避免大量的CSS膨胀，如果你能让所有人都能够使用网格概念。

我应该补充一点，如果网站是由大量人员构建和维护的，我肯定会推荐这种方法。如果网站是由一个人构建的，并且随着时间的推移，源HTML不一定需要大量更新，那么这可能有点矫枉过正，因此根据需要编写自己的自定义CSS可能更容易特定的网站。

哦！还有一件事：免责声明：以上都不适用于IE6，因为IE6无法处理一次引用两个类的CSS。当时，我们不得不支持IE6。我们所做的只是为IE6创建了一个jQuery脚本，它将寻找例如class="span-8 stretch-half"的div，并动态地将其替换为仅用于span-8-stretch-half的IE6的丑陋类。

IE6然后得到了一个不同的样式表，稍微更像这样的单个类的臃肿。这是丑陋的，但工作，我们真的只支持IE6支持抗议;）

Answer 2

你打算如何处理这个问题的方法是使用具有网格分配的容器/包装器，然后在该容器中添加具有仲裁填充/边距的div。

<style type="text/css">.widgetType {padding: 10px;}</style> 
<div class="span-8 column clearfix"> 
    <div id="myWidget" class="widgetType widgetType-skin-myskin"> 
    <!-- content --> 
    </div> 
</div> 

实际上在蓝图，甚至有做仅此紧闭gwith电网类是.box的，如果我还记得它增加了1.5em填充的基类。当然，这种填充可能会深入你的喜好，所以你不能使用这个类，并使用任意的东西，如果你喜欢