Layout in CSS

Geschichte

Obwohl schon früh der Wunsch nach komplexen Layouts vorhanden war, waren Layout-Tools in CSS lange kein Thema.

Bis 2003/2004 wurde Inhalt und Darstellung noch stark vermischt (Layouts wurden mit HTML-Tabellen erzeugt), als die Trennung von Inhalt und Darstellung in HTML und CSS aufkam, behalf man sich für mehrspaltige Layouts mit Floats und Margins. Für komplexere Layouts wurde absolute Positionierung verwendet - gerne in Zusammenarbeit mit Javascript.

Seit 2012 – 2015 gibt es Flexbox, damit können eindimensionale Inhalte gut gelayoutet werden. (Ein Element vertikal mittig zentrieren ist endlich einfach.)

Seit 2017 gibt es Grid, damit können zweidimensionale Inhalte gelayoutet werden.

Ausserdem gibt es noch einige seltener vorkommende Layout-Möglichkeiten: tabellarische Daten können im HTML-Element <table> erfasst werden. Wer das Layout-System der HTML-Tabelle mag, kann es mit display: table auf andere HTML-Elemente anwenden. Für mehrspaltige Inhalte (z.B. kurze Texte im Zeitungsstil) gibt es die Möglichkeit diese mehrspaltig anzeigen zu lassen.

Übersicht über die Layout-Module in CSS

1. Der normale Dokumentenfluss
2. Flexbox
3. Grid
4. (Float-Hacks)
5. Absolute Positionierung
6. diverse
   1. Spalten
   2. Tabellen-Styling
   3. Tabellen

Wann sollte man welche Layout-Methode verwenden?

Zu wissen, wann welche Layout-Methode am sinnvollsten ist, erfordert etwas Erfahrung.

Im folgenden einige Hinweise die beim entscheiden helfen.

1. Der normale Dokumentenfluss

Wenn man ein Layout vorliegen hat, dass sich im Rahmen des normalen Dokumentenflusses umsetzen lässt, so sollte man das tun.

Man sieht immer wieder Websites auf denen einfache Navigationen mit komplexen Methoden gelayoutet wurde. Dabei ist es nur eine Reihe von Links auf einer Zeile! Das lässt sich ohne weiteres inline lösen. Die Navigation soll sich am rechten Rand des Dokumentes orientieren? Kein Problem, der normale Textfluss kann mit text-align: right rechtsbündig gelayoutet werden.

Und Block-Inhalte? Mit display: block; können Inhalte untereinander angeordnet werden, mit display: inline-block; nebeneinander auf der Grundlinine.

2. Flexbox

Geht es darum aufeinanderfolgende Elemente zu layouten, ist Flexbox das Modul der Wahl. Ob horizontal oder vertikal spielt keine Rolle.

Mit Flexbox ist vieles möglich, was vor 2014 für Zähneknirschen sorgte:

• Elemente gleichmässig auf der ganzen Breite einer Linie verteilen.
• Verschieden hohe Elemente aufgrund ihrer Grösse oder ihres Inhaltes anordnen.
• Und einzelne Elemente in einem Elternelement mittig positionieren. (Ja das war früher ein Problem!)
• Die Reihenfolge von Elementen im Layout anpassen. (Achtung, das ist sehr praktisch, bei der Verwendung aber immer darauf achten, dass die Reihenfolge der Inhalte im HTML auch ohne CSS sinnvoll & verständlich ist.)
• Ausserdem gilt als Grundsatz: Alles was horizontal geht, geht auch vertikal.

3. Grid

Wann immer man Elemente auf einem Raster anordnen möchte, ist Grid das Modul der Wahl.

• Viele Gestalter layouten die Elemente auf einer Webseiten-Vorlage anhand eines Rasters. Dieses Raster kann mit dem Grid-Modul auf eine Website übertragen werden und die Elemente daran ausgerichtet werden.
• Mit Grid kann eine ganze Website mit mehreren Inhaltsbereichen gelayoutet werden. (siehe Grafik in diesem Abschnitt)
• Grid taugt aber auch um in einem kleinen Bereich der Website Elemente in Spalten und Reihen anzuordnen.
• Grid-Spalten und -Reihen können verschiedenste Breiten haben: fix (200px, 40em), prozentual zur gesamten Breite des Grids (50%), prozentual zur Fensterbreite oder -höhe (50vw, 50vh), oder als Teil des restlichen Platzes (1fr).
• Alle Eigenschaften in diesem Artikel (EN).

4. Float-Hacks

Sich ein Layout mit Floats und Margins zusammenbasteln müssen, sollte eigentlich nicht mehr nötig sein. Höchstens als Fallback-Lösung für alte Browser die Grid und Flexbox noch nicht unterstützen.

Trotzdem funktionieren die alten Lösungen natürlich nach wie vor. Wer ein Layout mit Floats umsetzt, machts nichts falsch. Man macht sich unter Umständen einfach unnötige Arbeit oder verbaut sich zukünftige Anpassungsmöglichkeiten.

Sucht man nach Hinweisen wie ein bestimmtes Verhalten mit CSS erzeugt werden kann, findet man im Internet naturgemäss noch viele Tutorials die auf Float-Layouts basieren. Nach Möglichkeit sollten diese vermieden werden und modernere Lösungen gesucht werden.

5. Absolute Positionierung

Gestaltet man einen Flyer auf Papier, so weiss man wie gross der Inhalt ist, man kennt die Grösse des Papiers, geht der Flyer in Druck wird sich nichts mehr ändern. Deshalb kann man in einem Layoutprogramm ohne weiteres jedes Element an eine absolute Position platzieren.

Ganz anders im Web: Der Webdesigner weiss nicht auf welcher Grösse von Bildschirm seine Webseite angezeigt wird. Meistens weiss er nicht einmal wie gross seine Inhalte sein werden, da diese oft erst nach der Erstellung des Designs in die Website eingefügt werden. Deshalb ist die absolute Positionierung nicht für den Normalfall geeignet und eher das letzte Mittel zum gestalten einer Website.

Allerdings gibt es einige Anwendungszwecke bei denen absolute Positionierung sehr sinnvoll ist:

Spezifische Positionierungen einzelner Elemente über anderen Elementen. Zum Beispiel Ein Icon rechts oben in einer Box. So etwas lässt sich prima mit absoluter Positionierung layouten. Die Box und die anderen Inhalte in der Box bleiben im normalen Dokumentenfluss. Jnd. wird noch ein padding gesetzt, damit der Text das Icon nicht überlagert und fertig.

Wenn nichts anderes mehr geht. Ein bekanntes Beispiel ist das Pinterest-Layout: lauter unterschiedlich grosse Artikel werden in mehreren Spalten platziert. Jedes weitere Element füllt die nächste Lücke. Dieses Layout kann nicht mit Grid umgesetzt werden, da Elemente in einem Grid auf derselben Linie platziert werden. Auch nicht mit Floats.

Wie setzt man nun ein solches Layout um? Entweder man kennt den Inhalt jeden Artikels, berechnet wie gross dieser wird und baut das Layout so Pixel für Pixel auf. Oder man verwendet Javascript (Pinterest macht das sicherlich so). Dabei berechnet die Javascript-Funktion von jedem Element die Höhe und berechnet dessen Position. Ändert sich die Fenstergrösse, so werden alle Positionen neu berechnet.

Der grosse Vorteil dieser Möglichkeit ist: man kann garantiert jedes Layout umsetzen. Man kriegt ein Element nicht anders dorthin wo es laut Layoutvorgabe soll? Mit absoluter Positionierung geht das.

Der Nachteil: Für unterschiedliche Bildschirmgrössen (responsive) oder andere Inhalts müssen die Elemente meistens anders positioniert werden. Das bedeutet viel Handarbeit oder bedingt eine gute Javascript-Funktion.