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

Seitenleiste + Inhalt CSS-Rasterlayout

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 mit einem bereits benannten zweispaltigen und einzeiligen Layout geöffnet: einer 200 Pixel großen Seitenleistenspalte neben einer flexiblen Inhaltsspalte, die den verbleibenden Platz einnimmt. Beide Bereiche sind in der Live-Vorschau sofort sichtbar, eingefärbt und beschriftet, sodass die Aufteilung auf einen Blick erkennbar ist.

Dies ist die gebräuchlichste Navigations-plus-Inhaltsform im Web – Einstellungsseiten, Dokumentationsseiten und Admin-Dashboards basieren alle auf einer Schiene mit fester Breite neben einem fließenden Hauptbereich. Da die Seitenleistenspalte einen Pixelwert und die Inhaltsspalte 1fr verwendet, behält die Seitenleiste eine konstante Breite, während die Inhaltsspalte jedes zusätzliche Pixel des Ansichtsfensters absorbiert.

Benennen Sie einen Bereich um, ändern Sie die Spaltenbreite oder fügen Sie weitere Zeilen für eine Kopfzeile über der Teilung hinzu – die CSS- und HTML-Ausgabe unten verfolgt jede Änderung in Echtzeit. Das Tool ist kostenlos und funktioniert weiterhin vollständig in Ihrem Browser, ohne Upload und ohne Konto.

🛡️
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.