Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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

Feedback & Ergänzungen – 4 Kommentare

  1. 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

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

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

      Antworten
      • 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

  2. 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 ;)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →