问题标签 [xy-grid]

我使用新的 Foundation xy 网格创建了一个练习站点，当我将浏览器缩小到一个小屏幕时，图像会紧贴页面的左侧，并且不再居中。直到我将屏幕设置为最小尺寸，然后图像才正确居中。我不明白我做错了什么，我将 align-center 类应用于父级。

密码笔

我正在使用带有 XY 网格的 ZURB Foundation 6，遇到了一个小问题，很可能是我做错了。

我想垂直居中元素所以我使用

并使用 jQuery 我通过使用设置 flex-container 的高度windowHeight = $(window).innerHeight();

瞧，这些项目是垂直对齐的......但是由此产生了两个问题：

1. small-6 cell宽度为 50%，未得到尊重，并缩小到文本的大约长度。
2. flex-container不像grid-container没有宽度或填充。

为了解决这个问题，我添加了一些 CSS，如下所示：

因此，虽然我已经修复了这个问题，但我不禁认为必须有一种更简单的方法，一种只使用类的正确方法。设置 grid-container 这样做似乎很奇怪，但 flex-container 没有。

我正在实施一个使用 Foundations 的 Flex-Grid 布局为我们开发的网站。我们实际上只有几页放在一起，在我开始扩展到更多页面之前，我想从 Flex-Grid 转换为 XY-Grid，因为 Zurb 将他们的 Flex-Grid 标记为旧版。我们使用 Sass 来做 CSS。我一直在网上搜索转换指南，但还没有找到。我想知道是否有人可以为我指出一个有用的转换指南来实现这一跳跃？

我正在尝试确定在 Foundation 6 XY 网格中使用 grid-x“行”的最佳实践。

具体来说，当我应该创建一个新的grid-x“行”与将多个单个元素单元格放在一个grid-x“行”中时，是否有一个好的经验法则（我一直使用引号，因为它们在技术上不是行在 XY 网格中）。

当我需要在同一行中对齐多个“列”单元格时（例如，如果我想要两个“列”并排），这似乎很简单，但是当我基本上堆叠单个元素“行”时呢（例如，一个h1，一个段落，另一个段落等）？我是否应该将这些元素放在单个 grid-x 元素中的单个单元格中...

或者我应该把它们放在一个单元格中......

这只是一个随意的（而且有些荒谬）的例子，但是对于什么时候应该使用新的 grid-x 有什么好的经验法则呢？

我有一个 XY 网格，其中有一个偏移画布，但在 XY 网格的主体中。我希望向左偏移画布位置以占据可用空间的全部高度，但它没有这样做。它根据画布内容的高度包装画布的高度。所以画布高度只根据画布的内容高度增长。当我将高度 100% 设置为画布外包装时，滚动就会混乱。我已经附上了一个codepen的链接来检查这个问题。

我在这里做错了什么。

CodepenLink

Can I use Foundation XY Grid SASS mixins to create grid gutter variations?

For example, I would like to have a grid with a 30px gutter, and a grid with a 10px gutter. No other differences between the grids.

我想知道是否可以为 Foundation 6.5 XY 网格上的某些单元格设置全宽。

我知道网格容器可以设置为流动或完整，但我的意图是在一个网格容器内将一些单元格设置为全宽。

除了创建一个单独的完整容器之外，我没有找到任何其他选择。

有任何想法吗？谢谢！

我正在尝试使用 Sticky 插件和 Foundation 的 XY Grid 创建站点标题。内部<div class="grid-x">仅在右侧保留其边缘，我无法找出原因。

我可以在 Chrome 的检查器中看到两边都有负边距，这里一定有一些我不知道的技巧......

HTML：

如果我这样做，它会按预期工作：

当我删除grid-margin-x课程时也很好。但是full在容器上加上与会grid-margin-x导致右边距也出现......

我是 Zurb Foundation 的新手，但很喜欢学习这个新框架。它取代了我多年来一直使用的旧主力，似乎可以完成我需要的一切。

不幸的是，我正在尝试为网站执行一个响应式标题，但我无法理解如何在新的 XY-Grid 中实现它。我已经接近了，虽然在小断点处的橙色块完全失败了:(

我真的很感激一些建议。

谢谢，先生边缘

由于 xy 网格清除行且不支持浮动，我未能让红色元素以大尺寸隐藏在橙色和蓝色下方（但可以通过负边距破解它）。刚接触 Foundation 和 flex 并没有帮助 :(

我已经制作了我想要实现的目标的图像，但由于我没有 10+ 的声誉，因此无法将其包括在内。也许这个链接会被允许：https ://i.imgur.com/TBSWGZr.png

Using ZURB Foundation XY-Grid, I want to vertically center a cell's content, while still being able to have the cells fill the total height of the grid (for each cell to have it's own background image), which doesn't allow using the class ".align-middle" on the parent grid, since the cell height is then collapsed.

I want to be able to do this with a solid solution that will work on many different types of content, where you don't know the name and the height of the grid, so I am not looking for some specific hacks.

I have tried making the cell a flex-container, by adding the class ".flex-container", this allows me to add a class to vertically align the content, but I am hesitant to move away from the intended use of XY-grid, since it may create some other challenges that I am not forseeing now.

The code above renders the cells correctly but with the text at the top of the cell.