我目前正在使用基础（Zurb）构建的XY网格中的grid-x，虽然当我使用卡片布局（如下所示）grid-padding-x时，可以看到卡片居中（这很棒），虽然我想在它上面放一个分类栏，但由于卡片布局相应调整，因此将其与下面的卡片布局对齐证明是困难的。
我希望在jsfiddle中显示的是卡的固定宽度和高度并自动居中（通过使用grid-padding-x来实现）尽管我想给予相同的余量顶部的导航栏与卡片对齐（边距左侧和右侧边缘）
有没有更简单的方法来实现这一目标？或者有没有办法将它们对齐？
JSFiddle：https://jsfiddle.net/7hjjt2Lp/
答案 0 :(得分：0)
实现我认为你正在尝试的最简单的方法可能是将导航栏放在.grid-x grid-padding-x内。这种对齐问题是使用基于填充的网格的挑战之一;你必须让网格内的所有东西都能正确对齐。
所以在这种情况下，你最终会得到
<div class="grid-x grid-padding-x">
<div class="cell">
<div class="sort-bar"></div>
</div>
</div>
你可以在这个小提琴中看到这个：https://jsfiddle.net/7hjjt2Lp/2/
或者，如果您使用边距而不是填充，则不会出现相同的问题。您可以转向使用边距网格，不再需要嵌套排序栏......对于该解决方案，只需将grid-padding-x转移到grid-margin-x即可。见https://jsfiddle.net/uy5euxc8/1/