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

Question

雅虎的 YUI 项目有一些非常棒的、经过充分测试的组件，我刚刚开始将它们集成到我的（固定宽度）网站中。 我实际上非常兴奋 - 我已经离开以消费者为导向的网站创建有一段时间了，看到过去几年的发展让我很开心。

非常喜欢 YUI 组件和 reset.css - 我假设我使用 Yahoo YUI grids.css 是理所当然的。 事实上，他们自己说卖得很好：

“组合页面宽度，模板 预设和嵌套网格，几乎 无限数量的复杂页面 布局是可能的”

（来自上面的 grids.css 链接）

但是，我正在尝试做一些非常简单的 3 列布局，但似乎无法做一些基本的事情 - 也没有在文档中找到如何做它们的很好的解释。

例如：

• 我可以更改列之间的装订线吗？
• 将 1/2、2/3、1/4 类型布局相互嵌套非常容易，但是我可以嵌套 yui-t1 模板吗？
  • （我确实在嵌套 yui-t1 选择器方面取得了有限的成功，但最终得到了多个具有相同 id 的 div，这让我相信我做错了什么。

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

到目前为止，我的印象是 YUI Grid 适合更多“内容驱动”的网站，在这些网站中，您可以获取不一定是新闻之类的内容。必须符合精确的设计。这是一个公平的说法吗？还是我错过了使用 grids.css 的一些技巧？

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

---

我 com/questions/348626/is-there-something-similiar-to-yui-grid">YUI 的替代品 - 如另一篇 stackoverflow 帖子中提供的

Answer 1

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

http://developer.yahoo.com/yui/3/示例/cssgrids/cssgrids-units.html

Answer 2

如果您确实研究 YUI 的替代方案，请查看 Blueprint CSS Generator (http://kematzy.com/blueprint-生成器/）。 这是自定义 CSS 网格的快速好方法（基于 Blueprint CSS）。

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

Answer 3

YUI 3 网格功能强大。 灵活、稳定简单。 看一看。

Answer 4

听起来您需要对 YUI 网格的默认设置进行大量自定义，对我来说，这有点违背了使用它的目的——或者更确切地说，使它不太灵活，因此效率较低。

您看过 Nate Koechley 的演讲吗？ 根据记忆，我认为他确实提到可以更改列之间的装订线，并解释了如何进行自定义。

http://developer.yahoo.com/yui/grids/

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

Answer 5

您可以通过覆盖边距属性来更改装订线。 您可以通过覆盖 .yui-gb { } 等选择器或您正在使用的任何布局来全面执行此操作。 如果您只想执行一组特定的列，您可以添加另一个类并使用它，只需确保您具有比 YUI 规则更高的特异性（或者进行相同的操作，并且您的规则在 CSS 文件中的位置较低）。

我不认为模板是可嵌套的，因为它们被设计为快速抛出来完成整个页面。

网格的创建方式是专门为了满足我们获得的页面大小而设计的，这些大小是由我们自己的 UED 指南和广告格式规定的。 没有什么可以阻止您使用框架作为基础并覆盖确切的宽度/装订线等。

免责声明：我为 Y 工作！

Answer 6

此答案由 Nate Koechley 在 YUI 论坛 提供 - YUI 高级工程师, YUI 团队

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

和

我认为最好将网格节点保留为未触及的骨架，并将内容标记放入该结构中。 是的，这是一些额外的标记，但我认为它是封装因为您的内容可以独立于网格自由且安全地移动。

我希望它对想要使用 YUI grid 的人有用

更新

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

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

并且您想添加一些额外的边距。 正如 Nate 所说，添加一些额外的标记

<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;
}

这样就不会影响 YUI CSS 网格的稳定性和行为