fest – flüssig – responsive – adaptive

Meine Erfahrung nach sind Layoutarten wie fest, flüssig, responsive oder adaptive gerade für Einsteiger schwer zuzuordnen. Deswegen habe ich jetzt einmal Minimalbeispiele gebastelt, die nur diese Begriffe verdeutlichen sollen. Um die Unterschiede nachvollziehen zu können, muss man das Browserfenster schmaler ziehen. Und ich habe eine Vereinfachung durchgeführt: ich zeige die unterschiedlichen Layouttypen nicht an vollständigen Layouts, sondern stelle jeweils zwei Bereiche gegenüber, die das unterschiedliche Verhalten deutlich machen. Weiterlesen

CSS Grid: Tricksen mit verschachtelten Grids

Eine Besonderheit bei Grid ist, dass man damit immer nur die direkten Kindelemente anordnen kann – nicht die Kindeskinder oder andere Nachfahren. Aber es gibt einen schönen Trick, wie man in einem Speziallfall doch scheinbar die Unterelemente mitanordnen kann und ein verschachteltes Grid für „ein Raster“ nutzen kann.

Weiterlesen

display: contents bei Gridlayout & Flexbox

Eines haben Gridlayout und Flexbox gemeinsam: Wenn man die Grid/Flexbox-Darstellung aktiviert, so lassen sich dann nur die echten Kindelemente anordnen, aber keine weiteren Nachkommen. Das diktiert einem aber auch eine entsprechende Struktur und manchmal passt es nicht … Abhilfe bietet die Eigenschaft display: contents.

Weiterlesen

Layouten mit Gridlayout und mit Flexbox im Vergleich

Lange Zeit hatten wir keine vernünftige Layouttechnik – und jetzt haben wir gleich zwei: Flexbox und Gridlayout. Gridlayout ist mächtiger, das ist klar. Brauchen wir damit überhaupt noch Flexbox? Diese Frage beantwortet man am besten an praktischen Beispielen – hier zeige ich ein Sticky-Footer-Layout, das dann erweitert wird, und führe vor, wie man das Layout in seinen Variationen jeweils mit Gridlayout und mit Flexbox umsetzt. Weiterlesen

justify-content: space-evenly bei Flexbox und Gridlayout

Durch justify-content: space-around wird bei Flexbox und Gridlayout der Leerraum zwischen den Items und am Anfang und Ende ergänzt. Zwischen den Items ist der Leerraum jedoch doppelt so groß wie am Anfang und am Ende. Manchmal hätte man es aber auch alle Abstände gleich – also space-evenly. Das funktioniert bei Gridlayout, für Flexbox ist es vorgesehen, funktioniert aber noch nicht in allen Flexbox-Browsern. Aber man das gewünschte Verhalten durch etwas Trickserei erreichen …

Weiterlesen

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.

Weiterlesen

Zentrieren mit Gridlayout

Natürlich ist das CSS3-Gridlayout-Modul für komplexe Layoutaufteilungen gedacht, aber manchmal braucht man ja auch banale Dinge – wie beispielsweise eine horizontale und vertikale Zentrierung. Und da das Gridlayout demnächst standardmäßig in Firefox (ab Version 52), Chrome (ab Version 57) und Safari (ab 10.1) unterstützt wird, scheint es mir der richtige Zeitpunkt, die verschiedenen Optionen auszuprobieren. Zur Wahl stehen für die Zentrierung die Angaben align-content, justify-content sowie align-items und justify-items. Was aber ist genau der Unterschied zwischen diesen Angaben? Und wie zentriert man jetzt am besten beim Einsatz vom CSS3-Gridlayout?

Weiterlesen