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

CSS-Rasterlayout mit 3 gleichen Spalten

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 auf drei Spalten gleicher Breite in einer einzelnen Zeile eingestellt ist, wobei benannte Bereiche ausgeschaltet sind – das Layout ist einfach „repeat(3, 1fr), die kürzeste Art zu sagen „drei Spalten, die die verfügbare Breite immer gleichmäßig aufteilen“.

Spalten gleicher Breite sind das Arbeitspferd von Kartenrastern, Preistabellen und Bildergalerien: Kein Bereich muss benannt werden, da jede Spalte die gleiche Rolle spielt. Daher ist die einfache Spurgrößenbestimmung klarer als bei einer Raster-Vorlage-Bereichs-Deklaration. Fügen Sie eine Reihe hinzu und wiederholen Sie die gleichen drei Bahnen darunter, immer noch perfekt gleichmäßig.

Erhöhen Sie die Spaltenanzahl, um ein dichteres Raster zu erhalten, oder schalten Sie benannte Bereiche ein, wenn sich eine spätere Spalte vom Rest abheben muss – das CSS und der HTML-Code unten werden sofort aktualisiert, wenn Sie dies tun. Alles läuft clientseitig, sodass Sie nichts hochladen und nichts warten müssen.

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