如何解决Foundation Sites v6.5.3中的XY-Grid响应行为挑战

Question

我是Zurb基金会的新手，但很高兴学习这个新框架。它取代了我多年来一直使用的老式主力机器，似乎可以满足我所需要的一切。

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

我真的很感激一些建议。

谢谢，mrEdge

由于xy网格清除行而不支持浮动，我没有将Red元素置于橙色和蓝色的大尺寸下（但可以通过负边距来破解它）。新的基金会和flex并没有帮助:(

<div class="grid-x align-right">
    <div class="cell small-5 medium-4 large-3" style="background-color:green;">
        GREEN
    </div>
    <div class="cell small-7 medium-8 large-9">
        <div class="grid-x">
            <div class="cell medium-12 large-7" style="background-color:orange;">
            <!-- Does not yet move above GREEN at small -->
                ORANGE
            </div>
            <div class="cell small-12 medium-12 large-5" style="background-color:blue;">
                BLUE
            </div>
        </div>
    </div>
    <div class="cell small-12 medium-12 large-9" style="background-color:red;">
        <!--Negative margin set at LARGE breakpoint (not a good solution)-->
        RED
    </div>
</div>

我已经描绘了我想要实现的目标，但不能包括它，因为我没有10+的声誉。也许这个链接将被允许：https://i.imgur.com/TBSWGZr.png

Answer 1

据我所知，flexbox并不是为了做你想做的事而设计的。我相信这将是flexbox上网格的一个用例。

如果您真的想坚持默认类并使用Foundation，那么this is the best I could get it (codepen)，基于您提供的图像。您的HTML位于顶部，而我的位于底部，因此我们可以看到断点处的行为的直接比较。

我敢肯定有一些比我自己更好的人可以看到一个不同的解决方案，在这种情况下，我真的很有兴趣看到它！

<div class="grid-x">
  <div class="orange cell small-12 medium-9 medium-order-2 large-4 large-order-2">
    ORANGE
  </div>
  <div class="green cell small-6 medium-3 medium-order-1 large-4 large-order-1">
    <p>GREEN</p>
    <p>content</p>
  </div>
  <div class="blue cell small-6 medium-9 medium-offset-3 medium-order-3 large-4 large-offset-0 large-order-3">
    BLUE
  </div>
  <div class="red cell small-12 medium-12 medium-order-4 large-8 large-order-4 large-offset-4">
    RED
  </div>
</div>

正如您所看到的，当每个div添加更多内容时，它会向下推动整个“行”内容，以便它们占据整个空间的100％高度。

这是网格进入的地方，如果你将它与断点一起使用，那么你将能够在你拥有的空间周围移动元素。

Here's a great guide to using grid.