icon-arrow-lefticon-arrow

Erklärung

Unter »Holy Grail« Web Design (Heiliger Gral) versteht man einen Layout-Ansatz der für nahezu jedes Projekt verwendet werden kann. Die Website basiert dabei auf einem flüssigen Gestaltungsraster und verwendet einen Header, gefolgt von einem dreispaltigen Layout mit Navigation, Hauptinhalt und Seitenleiste, sowie einen Footer.

»Holy Grail« Web Design – Dreispaltiges, flexibles Layout
»Holy Grail« Web Design – Dreispaltiges, flexibles Layout

Diskussion zu dieser Frage

  1. Tom
    schrieb am 14.06.2015 um 10:36 Uhr:

    Auch wenn dieser kurze Beitrag schon älter ist:

    Ich beschäftige mich zurzeit mit dem flexbox Modell und habe seit dem erst begriffen, warum man vom „holy grail layout“ spricht. Hier scheint sich einer der Vorteile von Flexbox zu zeigen:
    Damit die html-Struktur semantisch sinnvoll bleibt, kann ich über die flexbox-order Funktion dafür sorgen, dass alle Spalten in der gewünschten Reihenfolge umbrechen.
    Darüber hinaus können wir sowohl das vertical-align centern und auch in der Spaltenansicht eine gleiche Höhe aller Container ermöglichen.

    Fand ich einfach mal sagenswert ;)

  2. Thomas Fuchs
    schrieb am 18.06.2016 um 10:45 Uhr:

    Hallo,
    dieses Layout ist wirklich der „heilige Gral“!
    Ich habe mir im Netz den Wolf gesucht aber leider nichts dazu gefunden:
    Ist es möglich den content Bereich (mittlerer Teil unterhalb des Headers) im Quelltext ganz oben anzusiedeln? Von mir aus auch unterhalb des Headers aber auf jeden Fall oberhalb der linken und rechten Spalte.

    Viele Grüße
    Thomas

    • Jonas Hellwig
      schrieb am 19.06.2016 um 18:34 Uhr:

      Hallo Thomas, der Column Drop-Ansatz entspricht wahrscheinlich am ehesten deiner Vorstellung.

      • Thomas
        schrieb am 09.07.2016 um 10:14 Uhr:

        Hallo Jonas,
        vielen Dank für die Antwort. Nach zahlreichen Test’s habe ich festgestellt, dass für mich die flexbox Variante die beste ist. Dabei kann ich auf dem großen Screen dem „holy grail layout“ huldigen und bin aber auch bei kleineren Bildschirmen so flexibel das alles korrekt angezeigt wird.

        Mal am Rande: Ein riesen Kompliment an Eure Seite und den Tutorials (DVD).
        Dabei habe ich so viel gelernt! Klasse!

        Gruß
        Thomas

Ihr Kommentar zu dieser Frage

Bei Fragen, Anregungen oder Kritik zu dieser Frage, nutzen Sie bitte das Kommentar-Formular.

Ihr Kommentar wird überprüft bevor er auf der Website erscheint. Nicht themenrelevante Beiträge werden gelöscht.

Mit diesen Kunden haben wir bereits erfolgreich zusammengearbeitet.