Das Gestalten anspruchsvoller Web-Layouts für Magazine, Zeitschriften, Webseiten etc. mit Hilfe der Cascading Style Sheets (CSS) ist herausfordernd und dauernden technologischen Änderungen unterworfen. Bei Web-Designern gilt das Umsetzen eines Layouts mit mehreren, gleich hohen Spalten als «Holy Grail». 
Ein wichtiger Punkt des «Holy Grail» Layouts ist, dass sich bei einer Vergrösserung der mittleren Inhalts-Spalte sowohl die linke als auch die rechte Spalte automatisch in der Höhe anpasst (Bild Quelle: Wikipedia).
Nebst dem Erstellen von gleich hohen Spalten ist das Platzieren von Inhalts-Elementen nebeneinander eine weitere Herausforderung. Standardmässig werden die HTML Block-Elemente (vergleichbar mit Absatzstilen in der Textverarbeitung) untereinander platziert. <div>, <h1> bis <h6>, <p>, <form> etc. sind typische Block-Elemente.
Im Laufe der Zeit entwickelten sich verschiedene Techniken, das Ziel mit Hilfe von HTML und CSS zu erreichen.
Frames
In den Urzeiten des Webs wurden Seiten mit Frames aufgebaut. Das Browserfenster bestand aus mehreren Teilbereichen, in welche unabhängige HTML-Seiten geladen wurden. Obwohl völlig veraltet, gibt es immer noch etliche Websites, welche mit Frames aufgebaut sind (exemplarisches Beispiel). Der Artikel «HTML Frames» erklärt den Aufbau. Das aktuelle HTML unterstützt die Frames (zum Glück) nicht mehr.
Der Aufbau von Websites mit Frames war kompliziert, die Bedienung benutzerunfreundlich und ungeeignet für die Suchmaschinen-Optimierung.
Tabellen
Für eine weitere, auch völlig veraltete Methode zum Aufbau eines Layouts wurden Tabellen verwendet. Tabellen machen Sinn, wenn Inhalte verglichen werden. Für Layouts sind sie wegen ihres komplizierten und unflexiblen Aufbaus ungeeignet (exemplarisches Beispiel).
Tabellen sind in der heutigen Zeit ungeeignet, um professionelle Layouts aufzubauen.
CSS Float
Der nächste Entwicklungsschritt war der Aufbau mit dem CSS Befehl Float. Zwei HTML Block-Elemente können mit Hilfe dieses Befehls nebeneinandergestellt werden. Der Befehl wird sehr häufig für das Layouten verwendet, allerdings ist es schwierig, gleich hohe Spalten zu erstellen (exemplarisches Beispiel)
Der Float-Befehl erlaubt, zwei oder mehrere Elemente nebeneinander zu stellen (Quelle).
Es ist möglich, eine saubere HTML-Struktur mit Float zu visualisieren. Der Befehl ist allerdings recht eingeschränkt, die Reihenfolge der Inhalte kann nicht gross manipuliert werden und erlaubt keine anspruchsvollen Layouts.
CSS Flexboxes
Die Formatierung mit den Flexboxes wird von allen modernen Browser unterstützt und vereinfacht das Layouten deutlich.
CSS Flexboxes werden zunehmend für die Gestaltung komplexerer Layouts verwendet (Quelle)
Flexboxes erlauben, die Inhalte entweder zeilen- oder spaltenweise darzustellen, in normaler oder umgekehrter Reihenfolge (Quelle).
Es gibt auch die Möglichkeit, die Reihenfolge des Inhaltsflusses selber festzulegen (Quelle), was individuelles Layouten unabhängig der Reihenfolge in der HTML-Datei erlaubt.
Verschiedene Online-Tools ermöglichen, den Code der Flexboxes interaktiv zu erzeugen (Beispiel). Praktisch alle Forderungen von «Holy Grail» werden mit Hilfe der Flexboxes erfüllt (exemplarisches Beispiel).
Im exemplarischen Beispiel ist das HTML-Layout gleich aufgebaut wie beim Float-Befehl.
Simples CSS für die Erstellung rudimentärer Flexboxes
CSS Grid Layout
Weit entfernt von einer sauberen Browser-Unterstützung ist das CSS Grid Layout, Chrom und Firefox unterstützen es nur durch das Setzen von Flags im Browser.
Die breite Unterstützung von CSS Grid Layout ist noch nicht vorhanden (Stand August 2016, Quelle)
Ein Vorteil des Grid Layouts ist, dass sich Objekte überlappen können (Quelle)
CSS Regions
Der Vorteil der CSS Regions ist, dass es einen Textfluss durch mehrere Container erlaubt, ganz analog zum Vorgehen in Layout-Programmen. Die Browser-Unterstützung ist mangelhaft (Stand August 2016), es ist unsicher, ob die Unterstützung im Chrom Browser jemals kommt.
Mit CSS Regions kann der Textfluss durch verschiedene Rahmen gesteuert werden. Die fehlende Browser-Unterstützung erlaubt aber noch nicht, die Technologie zu verwenden (Quelle).
CSS Shapes
Chrome und Safari (nicht aber Edge und Firefox) unterstützen den Konturensatz um ein unregelmässiges Bild. Die Spezifikation ist seit März 2014 eine «Candidate Recommendation». Im Netz finden sich viele Tutorials, wie sich die unregelmässigen Formen umfliessen lassen (Beispiel), es sind zum Beispiel Kreise, Ellipsen oder Polygone unterstützt.
Chrom und Safari unterstützen den Konturensatz (exemplarisches Beispiel).
Ausblick
Dank den Flexboxes sind heute schon anspruchsvolle Layouts realisierbar, in naher Zukunft wird hoffentlich das Grid Layout auch von allen Browsern unterstützt. Dann lassen sich mit CSS auch komplexe und mit Hilfe der CSS Regions magazinähnliche Layouts erstellen.
