Flexbox vs Gridlayout: einfache Navigation mit unbekannter Anzahl an Punkten

Für einfache Layoutanordnungen ist Flexbox das Mittel der Wahl, das ist klar. Trotzdem hat mich interessiert, wie man folgenden Fall mit Gridlayout löst – eine horizontale Navigation mit unbekannter Anzahl an Navigationspunkten, wobei der Platz aber bestmöglich ausgenutzt wird. Im Vergleich dazu zeige ich auch die Lösung mit Flexbox.

Wie der Screenshot zeigt, nutzen die Navigationspunkte  immer den verfügbaren Platz.

Basis ist ein nav-Element mit einer ungeordneten Liste.

<nav>
<ul>
<li><a href="#">Eins</a></li>
<li><a href="#">Zwei</a></li>
<li><a href="#">Drei</a></li>
<li><a href="#">Vier</a></li>
<li><a href="#">Fünf</a></li>
</ul>
</nav>

Horizontale Navigation mit Flexbox

Sehen wir uns erst mal an, wie man das mit Flexbox löst.

Für die Flexboxlösung sind zwei Schritt notwendig: Zuerst einmal müssen wir die Flexboxdarstellung beim umfassenden Element aktivieren – d.h. beim ul-Element:

nav ul {
display: flex;
}

Und dann müssen wir noch dafür sorgen, dass die einzelnen Items den verfügbaren Platz einnehmen:

nav li {
flex: 1;
}

(Ich zeige hier nur die Standardsyntax, zusätzlich muss man je nach gewünschter Browserunterstützung noch den Flexbox-Code für ältere Browser wie Autoprefixer erzeugen lassen.)

Beispiel ausprobieren

Horizontale Navigation mit Gridlayout

Und nun zur Gridlösung. Da habe etwas herumprobieren müssen – bis ich merkte, dass die Lösung wunderbar einfach ist. Zuerst müssen wir die Gridlayout-Darstellung aktivieren – ebenfalls beim umfassenden Element, d.h. bei der ungeordneten Liste. Standardmäßig werden die Elemente dann untereinander dargestellt. Für eine Darstellung nebeneinander bei automatisch generierten Spalten nutzen wir grid-auto-flow: column.

Damit genügen zwei Zeilen :

nav ul {
display: grid;
grid-auto-flow: column;
}

Sehr schön minimalistisch!

Beispiel ausprobieren – aktuelle Browserunterstützung für Gridlayout bei CanIuse

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>