⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

Holy Grail CSS-Rasterlayout – fertiger Code

Entwerfen Sie CSS-Rasterlayouts visuell: Legen Sie Spalten, Zeilen und Lücken fest und geben Sie dann Bereichsnamen in Zellen ein, um Rastervorlagenbereiche zu erstellen – mit einer Live-Vorschau und kopierbarem CSS und HTML.

Geben Sie einen Namen in eine beliebige Zelle unten ein. Zellen mit demselben Namen werden zu einem Bereich mit Rastervorlagenbereichen zusammengeführt.

Verarbeitung... 0%

Ergebnis

Auf dieser Seite wird der Rastergenerator geöffnet, der mit dem Layout „Heiliger Gral“ vorinstalliert ist: drei Spalten und drei Zeilen, mit Kopf- und Fußzeile über die gesamte Breite und einer Navigations-/Haupt-/Nebenzeile dazwischen. Die Kopfzeile verwendet die automatische Höhe, die mittlere Zeile füllt den verbleibenden Raum aus und die beiden Seitenspalten sind auf 200 Pixel festgelegt, während die Hauptspalte den Rest einnimmt.

Das Heilige-Gral-Layout erhielt seinen Namen, weil es vor CSS Grid wirklich schwer zuverlässig zu erstellen war – jahrelange Float-Hacks, Tabellenlayouts und absolute Positionierung versuchten, genau diese Form vorzutäuschen. Mit „grid-template-areas“ lässt es sich auf fünf benannte Regionen und eine Handvoll Spurgrößen reduzieren, weshalb es weiterhin das standardmäßige erste Beispiel für das Unterrichten von CSS Grid bleibt.

Jede Zahl und Lücke auf dieser Seite ist noch aktiv: Verkleinern Sie die Seitenspalten, fügen Sie eine vierte Zeile hinzu oder benennen Sie einen Bereich um und die Vorschau sowie das kopierbare CSS werden sofort aktualisiert. Kopieren Sie die CSS- und HTML-Blöcke direkt in Ihr Projekt – alles läuft lokal in Ihrem Browser, nichts wird hochgeladen.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Zahleneingaben für 1–6 Spalten und Zeilen sowie separate Steuerelemente für Spaltenabstand und Zeilenabstand, die bei Übereinstimmung zu einem Lückenwert kombiniert werden.
  • Ein benannter Bereichsmodus: Geben Sie einen Bereichsnamen direkt in eine beliebige Zelle des Live-Rasters ein; Das Tool erstellt eine gültige Zeichenfolge „grid-template-areas“ und warnt, wenn Namen keine sauberen Rechtecke bilden.
  • Kopierbarer CSS-Block (Anzeige: Raster, Rastervorlagenspalten/Zeilen, Lücke, Rastervorlagenbereiche) plus ein passendes HTML-Gerüst mit einem Rasterflächen-Div pro benannter Region.

Wichtigste Vorteile

✓ Geben Sie einen Namen direkt in eine beliebige Zelle ein, und übereinstimmende Namen werden in einem Bereich mit Rastervorlagenbereichen zusammengeführt – kein Ziehen per Drag-and-Drop und kein manuelles Erraten der Syntax der in Anführungszeichen gesetzten Zeichenfolgen.
✓ Die Größe und Farbe des Live-Vorschaurasters ändert sich bei jeder Änderung neu, sodass Sie die genauen Spalten- und Zeilenspuren sowie jeden benannten Bereich sehen, bevor Sie eine einzelne CSS-Zeile kopieren.
✓ Voreinstellungen wie das klassische Holy-Grail-Layout und eine schmale Seitenleiste geben Ihnen eine echte, funktionierende Raster-Vorlagenbereichs-Deklaration als Ausgangspunkt anstelle eines leeren Rasters.

Anwendungsfälle

  • • Erstellen Sie die klassische „Heilige Gral“-Seitenhülle – Kopf- und Fußzeile in voller Breite mit einer Navigations-/Haupt-/Nebenzeile in der Mitte –, indem Sie Bereichsnamen eingeben, anstatt Grid-Template-Areas von Hand zu schreiben.
  • • Gestalten Sie eine Einstellungsseite oder ein Admin-Dashboard mit einer Seitenleiste fester Breite neben einer flexiblen Inhaltsspalte und kopieren Sie das genaue CSS und HTML, sobald die Live-Vorschau richtig aussieht.
  • • Überprüfen Sie vor dem Versand, ob eine Reihe benannter Bereiche tatsächlich gültige Rechtecke bilden. Das Tool markiert die genauen Namen, die Rastervorlagenbereiche im Browser zerstören würden.