Ausrichten von Spalten - Flexbox

Question

Ich verwende derzeit grid-x von XY Grid von Foundation (Zurb) gebaut, obwohl, wenn ich ein Kartenlayout (wie unten gezeigt) mit grid-padding-x, kann man sehen, dass die Karten zentriert kommen (was toll ist), obwohl ich gerne eine Sortierleiste darüber legen würde, erwies sich dies an dem darunter liegenden Kartenlayout als schwierig, da sich das Kartenlayout entsprechend anpasst.

Was ich gerne haben würde, wie in der jsfiddle gezeigt, ist eine feste Breite und Höhe der Karten und automatisch zentriert (wie erfüllt mit grid-padding-x), obwohl dann möchte ich die gleiche Marge geben die obere Navigationsleiste an den Karten auszurichten (Rand links und Rand rechts)

Gibt es einen einfacheren Weg dies zu erreichen? Oder gibt es eine Möglichkeit, sie miteinander in Einklang zu bringen?

JSFiddle: https://jsfiddle.net/7hjjt2Lp/

How am I expecting it to look

Answer 1

Wahrscheinlich die einfachste Art und Weise zu erreichen, was ich glaube, Sie versuchen, ist die Navigationsleiste in einem .grid-x grid-padding-x auch zu setzen. Dieses Ausrichtungsproblem ist eine der Herausforderungen bei der Verwendung eines paddingbasierten Rasters. Sie müssen alles innerhalb des Gitters haben, um richtig auszurichten.

Also in diesem Fall würden Sie sich mit

<div class="grid-x grid-padding-x"> 
    <div class="cell"> 
    <div class="sort-bar"></div> 
    </div> 
</div> 

beenden Sie diese in dieser Geige sehen: https://jsfiddle.net/7hjjt2Lp/2/

Alternativ, wenn Sie Rand anstelle von padding Sie haben nicht die gleiche Problem. Sie könnten zur Verwendung des Randrasters wechseln und müssen Ihre Sortierleiste nicht mehr verschachteln ... für diese Lösung verschieben Sie einfach Ihre grid-padding-x zu grid-margin-x. Siehe https://jsfiddle.net/uy5euxc8/1/