CSS Raster Generator

Einstellungen

3
2
8px
8px

Vorschau & CSS

 
   
 
 
   
 
 
 
Anleitung
 
     
  1. Spalten & Zeilen — Schieberegler für die Anzahl der Spalten (1–6) und Zeilen (1–4) verwenden.
    2.  
  2. Abstände anpassen — Spalten- und Zeilenabstand unabhängig voneinander festlegen.
    3.  
  3. Auto-fill aktivieren — "Auto-fill" aktivieren für repeat(auto-fill, minmax(120px, 1fr)) — ein vollständig responsives Raster.
    4.  
  4. Vorschau — Farbige nummerierte Zellen zeigen die Rasterstruktur in Echtzeit.
    5.  
  5. CSS kopieren — Die generierten Eigenschaften grid-template-columns, grid-template-rows und Abstände kopieren.
    6.  
 
 
 
Was ist CSS Grid?
 
CSS Grid Layout ist ein zweidimensionales Layout-System, das Zeilen und Spalten gleichzeitig steuert. Anders als Flexbox (eindimensional) ermöglicht Grid die präzise Platzierung von Elementen an beliebigen Positionen.
 
Die fr-Einheit verteilt verbleibenden Platz proportional. repeat() vermeidet Wiederholungen. auto-fill mit minmax() erzeugt responsive Spalten ohne Media Queries.
 
 
 
Häufige Anwendungsfälle
 
 
Fotogalerien
 
Dashboard-Layouts
 
Produktkarten-Raster
 
Magazin-Layouts
 
Preistabellen
 
Responsive Kachel-Layouts
 
 
Tipps & Best Practices
 
 
 fr-Einheiten verwenden 
1fr bedeutet "ein Anteil des verbleibenden Platzes". repeat(3, 1fr) erzeugt drei gleiche Spalten, die mit der Container-Breite skalieren.
 
 
 gap-Kurzschreibweise 
Wenn Zeilen- und Spaltenabstand gleich sind, kann die gap-Kurzschreibweise statt column-gap und row-gap verwendet werden.
 
 
 auto-fill vs. auto-fit 
auto-fill behält leere Tracks; auto-fit entfernt sie. Für die meisten responsiven Raster ist auto-fill die sicherere Wahl.
 
 
 Benannte Grid-Linien 
Bei komplexen Layouts Grid-Linien mit [name]-Syntax benennen und Elemente mit grid-column: start / end platzieren.
 
 
 
Häufig gestellte Fragen
 
 
Was ist der Unterschied zwischen CSS Grid und Flexbox?
 
Grid ist zweidimensional — es steuert Zeilen und Spalten. Flexbox ist eindimensional — es arbeitet entlang einer einzelnen Achse. Grid für Seiten-Layouts, Flexbox für Komponenten-Ausrichtung verwenden.
 
 
 
Was bedeutet repeat(auto-fill, minmax(120px, 1fr))?
 
Es werden so viele Spalten wie möglich erstellt, jeweils mindestens 120px breit, mit gleichmäßiger Verteilung des verbleibenden Platzes — ohne Media Queries.
 
 
 
Wie lasse ich ein Element mehrere Spalten überspannen?
 
grid-column: span 2; dem Element hinzufügen, damit es zwei Spalten-Tracks belegt. Analog gilt grid-row: span 2 für Zeilen.
 
 
 
Wird CSS Grid in allen Browsern unterstützt?
 
Ja. CSS Grid wird in allen modernen Browsern unterstützt. Die hier verwendeten Funktionen — repeat(), fr, gap — sind alle ohne Präfixe verfügbar.