问题标签 [singularitygs]

只是一个进入 Web 开发的新手。

我经历了许多网格系统，我真的很喜欢singularitygs 背后的概念。它非常独特。

我还没有尝试过 Singularitygs，但我想问一下我在使用其他网格系统时遇到的这个问题。

这是拉伸嵌套单元格以使顶部和底部在容器内对齐的问题。

CSS3 提供了带有拉伸选项的 flexbox，但 IE8 或 9 不支持它。

singleitygs 是否提供任何解决此格式问题的方法？当我使用singularitygs 时，如何在不必依赖CSS 表格布局的情况下排列单元格？

谢谢你。

是否可以在 sass 格式而不是 SCSS 格式中使用singularitygs？

奇异性和断点似乎都只带有 SCSS 格式文件。如果我手动将提供的文件转换为 sass 格式，这行得通吗？

我尝试在 config.rb 文件中将默认格式设置为 sass，但这似乎在开始观看时会导致错误。

我刚刚开始使用 Drupal、Omega 4 主题的响应式设计技术，并且想使用奇异网格系统。我不太了解 CSS（基本原则是的，微妙之处不是），而 SASS 似乎是逃避一些更神秘的特性的好方法（有点像 jQuery 帮助你避免使用 Javscript）。因为我真的是一个初学者，所以我想我会从一个尽可能简单的虚拟页面开始。所以，这里是 HTML：

我做了一个 sass 样式表，一开始只是将所有 div 显示在一个列中，一个列在另一个列下，这很有效（不难！）。我想发布一张图片来表达我的意思，但显然我不能！

然后，我尝试添加断点并尝试修改 sass 代码，使其显示在 2 列网格上，每个 div 交替显示在左侧和右侧。这是我使用奇异性的 sass 代码：

当断点启动时，Waldo Garfield 和 Qux 已经全部移动到了显示屏的顶部——Foo 已经完全不可见并被覆盖。我通过摆弄“清晰：两者/左/右”来获得接近我想要的东西，但它是无可救药的经验性的，我很确定它不可靠。我肯定错过了一些东西，但如果有人能告诉我什么，我将不胜感激！

如何使用 Singularity 获得嵌套网格？我制作了一个简单的网格，需要使用浮动方法的嵌套网格。

我的样本：http ://sassmeister.com/gist/7326030

大家好，

我一直在研究 Singularity 网格框架，到目前为止我真的很喜欢它的简单性和概念/心理模型。但是，像其他人一样，我仍然对如何在 Singularity 中正确地进行嵌套网格感到有些困惑。在查看了类似的问题后：

• 仍然对嵌套网格感到困惑
• 具有浮动方法和填充的子网格
• 必须重新声明全局上下文？

我想出了以下示例来创建嵌套网格：一个仅使用grid-span，另一个使用layoutand grid-span：

• 使用网格跨度的奇点嵌套列
• 使用 layout+grid-span 的奇点嵌套列

如您所见，尽管使用该layout方法感觉更好，但它们达到了相同的最终结果。考虑到这一点，我的问题是 2 倍：

1. 是否有创建具有奇点的嵌套网格的“最佳/推荐实践”？

2. 为什么使用vs.background-grid时在相同元素上绘制的网格不同？似乎嵌套列的创建方式不同，因此具有不同的“内部”列？使用的背景网格似乎更正确，尽管有些元素看起来不正确（例如，“第一个”元素在其中绘制了 10 列，而它只跨越了父容器的 8 列，而“a”和“b” " 元素在其中绘制了 6 列，尽管它们仅跨越父容器的 3 列）。grid-spanlayoutlayoutbackground-gridbackground-grid

   如果我误解了奇点的一些简单概念，我提前道歉。事实上，这很可能;)

   提前感谢您的帮助。

和平

大家好，

我有一个简单的例子，在同一个网格上下文中混合float-span和grid-span混合（即同一行中的列数相同）

http://sassbin.com/gist/7812502/

如您所见，我有 3 个项目要连续均匀分布。我在第 1 项和第 3 项上使用float-spanwithfirst和last选项，使它们分别位于行的开头和结尾，这按预期工作。对于我想要居中的中间项目，我假设我可以使用grid-span正确的位置将第二个项目放在中间。但是，发生的情况是，在第一个浮动项目占用的列之后grid-span开始计算位置。这是预期的行为吗？换句话说，是否允许在同一网格上下文/行中混合使用？如果不是，那么在 Singularity 中完成同一件事的首选方式是什么？float-spangrid-span

我一直在搜索文档 wiki，特别是关于跨越网格的部分，但无论哪种方式都没有找到任何陈述。并且这些演示似乎没有一起使用float-span和grid-span。

像往常一样感谢奇点和任何帮助。

和平

PS。我已经尝试使用isolation-spanmixin 来代替grid-span相同的结果。

在我的 web 应用程序中，我有几个地方（如用户个人资料），我使用列来放置 propertyName -> propertyValue 对。有时属性值很短，我可以在一行中同时拥有属性名称和值，但有时属性值很大（例如用户兴趣的云或描述某些内容的段落），因此将整个新行用于 property_value 是有意义的。

如果属性值太长，是否有任何推荐的方法（主要是通过singularity.gs）使属性值转到另一行？

我为 Singularity 提供了一个新项目。到目前为止，我使用的是 Susy。通常我更喜欢单独发布问题，但在目前的情况下，这些问题与处理一个中心点有关。设置如下。

我的主页是一个带有背景图像的页眉和一个带有渐变的页脚，包含内容的容器两侧应该有边距。主要的标记骨架如下所示：

包装和容器的基本样式如下所示：

现在我有两个问题：

1）页面上有两个空白

第一个可以用 overflow-x: hidden; 修复。在 %wrap 或 .mainwrap 上。但是 .mainwrap 和 .footwrap 之间的第二个差距是无法解决的。.mainwrap 和 .footwrap 之间边界的理想外观应如下所示。在 mainwrap 和 mainwrap 下方视觉上的页脚有一个可见的阴影：

但是通过所描述的 html 和 css 设置，我总是得到上面已经看到的差距：

任何想法为什么？:(

2）容器的设置这是我遇到的大多数问题中最不确定的部分，并问自己处理的最佳实践可能是什么。我的基本设置是：

对于 .container 我添加了：

就像在 Github 上的 Singularity 论坛主题之一中建议的那样。但我仍然不确定最佳实践可能是什么。基本上我会有一个切换到边距的最小填充：0 auto; 当达到为容器定义的最大宽度时。padding-left/right 和 gutter-span 以及 max-width 的方式是否合适？

这是否意味着您必须为容器定义基本列号和最大宽度。当达到最大宽度时，您可以向上更改最大宽度并使用 add-grid() 重新定义活动网格设置并调整填充。您继续这样做，直到容器的最大宽度为 1400 或 1600 像素。在更宽的视口的断点上，您必须使用多个 gutter-span。总结起来会是这样吗？

但基本上，如果您想在容器上以细粒度的方式控制事物，那将导致相当多的断点？或者是否有更优雅的解决方案？

最好的问候拉尔夫

我一直在尝试找出使用 Singularity 显示项目列表的最佳解决方案。

我想基本上删除每行最后一项的填充，但将该填充添加回所有项目的整体项目宽度。

我认为解决方案与css的关系比奇点更多，但也许在我缺少的奇点中有一个很好的解决方案？

这些项目最终会被一个cms定期添加。

示例：http ://sassmeister.com/gist/7916151

在奇点的应用中，我仍然对某些方面感到困惑。例如，我想知道一件事。在以下要点中，我设置了一些简单的元素。底部的蓝色是页脚，中间的黄色是内容，上面的三个单元格（红色，绿色紫红色 - 由 grid-span 构建）构建页眉。这三个部分都是由同一个容器构建的。

http://sassmeister.com/gist/8010028

我想知道使标题比其他两个更宽的最干净的方法是什么。

• 通过为包装标题元素定义百分比宽度？
• 通过将布局混合应用到标题元素并设置一个全新的上下文？

或者，如果它们都依赖于相同的容器设置和上下文，那么这三个中的一个甚至不可能有不同的宽度？最好的问候拉尔夫