YUI grids.css真的那么灵活吗？

雅虎的YUI项目有一些非常棒、经过良好测试的组件，我刚刚开始将它们集成到我的（固定宽度）网站上。事实上，我非常激动——我已经离开了面向消费者的网站创建有一段时间了，看到过去几年的发展，我感到非常有趣

我非常喜欢YUI组件和reset.css——我认为我使用的是一个简单的工具。事实上，他们说自己可以很好地销售：

“合并页面宽度、模板 预设和嵌套格线，几乎 无限多个复杂页面 布局是可能的“
（来自上面的grids.css链接）

然而，我试图做一些非常简单的3列布局，似乎不能做一些基本的事情-也找不到很好的解释在文档中如何做他们

例如：

• 我可以更改柱之间的檐槽吗
• 将1/2、2/3、1/4类型布局嵌套在彼此之间非常容易，但是我可以嵌套

  yui-t1

  模板吗？
  • （我确实获得了有限的成功嵌套

    yui-t1

    选择器，但最终多个div拥有相同的id，这让我相信我做错了什么

我的网站更多的是“设计驱动”——也就是说，有一个photoshop标记需要制作成一个页面

到目前为止，我的印象是YUI Grid适用于更多的“内容驱动”网站，在这些网站上，你可以获得像新闻这样的内容，而这些内容不一定要符合精确的设计。这是一个公平的说法吗？还是我错过了一些使用grids.css的魔术

我是否更适合使用具有固定位置的替代网格

---

---

-正如在另一篇stackoverflow文章中所提供的那样，听起来您需要对YUI网格的默认设置进行大量定制，这对我来说，有点不利于使用它——或者更确切地说，使其不那么灵活，从而降低了效率

你看过Nate Koechley的演讲了吗？根据记忆，我想他确实提到了可以改变栏目之间的间距，并解释了如何进行定制

---

基本上，您可以深入研究网格的CSS文件，确定列之间的间距设置位置，并在您自己的CSS文件中进行调整。

如果您确实研究YUI的替代方案，请查看Blueprint CSS Generator（）。这是一种快速定制CSS网格的好方法（基于）

---

不幸的是，我不知道YUI是否有类似的工具。

您可以通过覆盖margin属性来更改边沟。您可以通过覆盖.YUI gb{}之类的选择器来全面更改边沟，等等，或者你正在使用的任何布局。如果你只想做一组特定的列，你可以添加另一个类并使用它，只需确保你比YUI规则有更多的特殊性（或者做相同的，并且你的规则在CSS文件中更低）

我不认为模板是可嵌套的，因为它们被设计成一个可以快速完成整个页面的东西

网格的创建方式是为了满足我们得到的页面大小，这些页面大小由我们自己的UED指南和我们的广告格式控制。没有什么可以阻止您使用框架作为基础，并覆盖确切的宽度/水槽等

---

免责声明：我为Y工作！

此答案由YUI团队的Nate Koechley at-YUI高级工程师提供

我建议人们不要直接接触网格骨架节点。当然，欢迎您使用，但正如您所注意到的，这会影响他们的稳定性和行为

及

我认为最好将网格的节点作为未触及的骨架，并将您的内容标记放在该结构中。这是一点额外的标记，是的，但我认为它是封装，因为您的内容可以自由安全地移动，而不受网格的影响

我希望它对想使用YUI网格的人有用

更新

假设这里有一些yui-grid标记

<div class="yui-g">
    <div class="yui-u first"></div>
    <div class="yui-u"></div>
</div>

---

这种方式不会影响YUI CSS网格的稳定性和行为

功能强大。Flexibe、stable和simple。请看一看。

只想提到，在新的YUI 3网格中，有一个关于如何指定网格间距的具体示例

---

谢谢！这是一个很棒的框架-我只是希望Y！没有说“几乎无限多的复杂页面布局”-这有点误导IMHO。我似乎也无法让2列以960像素的宽度工作（即使使用公式）。它在IET中被关闭了1像素。我用来调整yui gc的边距的样式是：.yui gc.yui-u{margin left:0px；width:34%；}如果你不知道YUI是否有什么需要，这有什么帮助？！开玩笑吧……使用blueprint kids。在这种情况下，她所说的“触摸节点”是什么意思？他们是在讨论将css类应用于节点还是什么else@Simon_Weaver他明确表示：不要直接触摸节点（是的，不要触摸YUI grids CSS类）否则会影响它们的稳定性和行为。他的建议是：将内容标记放在该结构中。请参阅updatethats非常酷。也许我现在可以摆脱.padding15类：-）

<div class="yui-g">
    <div class="yui-u first">
        <div class="specialCss">
            your content goes here
        </div>
    </div>
    <div class="yui-u">

    </div>
</div>

.specialCss {
    margin:10px;
}