CSS-Grid-Generator
Wähle die Spalten, die Zeilen und den Abstand dazwischen oder nutze den responsiven Modus, damit sich die Karten je nach Bildschirm von selbst neu anordnen. Die Vorschau zeigt das Ergebnis sofort.
So geht’sLayout mit CSS Grid
Ziehe die Ecke der Vorschau, um Breiten zu testen. Tippe auf ein Element, damit es 2 Spalten belegt.
Verfügbar auf: 
CSS-Grid-Generator: wofür es gut ist
Wähle feste Spalten (mit Kurzwahlen für 2, 3 und 4 Spalten, Inhalt mit Seitenleiste und Menü mit Inhalt) oder den responsiven Modus, in dem sich die Spalten mit repeat(auto-fit, minmax()) der Breite anpassen. Lege die Zahl der Elemente und den Abstand dazwischen fest.
Tippe auf ein Element der Vorschau, damit es zwei Spalten belegt, und ziehe die Ecke der Vorschau, um Breiten zu testen. CSS und HTML sind fertig zum Kopieren.
So geht’s
- Wähle den Modus und die Spalten.
- Lege Elemente und Abstand fest; tippe auf Elemente, damit sie 2 Spalten belegen.
- Kopiere CSS und HTML.
Wann nutzen
- Raster aus Karten, Produkten und Fotos.
- Layouts mit Seitenleiste.
- CSS Grid lernen, indem man das Ergebnis sieht.
Häufige Fragen
Was bedeutet 1fr?
Einen Bruchteil des übrigen Platzes. Drei Spalten 1fr 1fr 1fr teilen die Breite in gleiche Teile; 2fr 1fr gibt der ersten Spalte die doppelte Breite der zweiten.
Was macht repeat(auto-fit, minmax(220px, 1fr))?
Es erzeugt so viele Spalten, wie hineinpassen, jede mit mindestens 220px, und streckt die Spalten, damit sie die ganze Zeile füllen. Es ist der einfachste Weg, ein responsives Kartenraster ohne Media Queries zu bauen.
Wie lasse ich ein Element zwei Spalten belegen?
Nutze grid-column: span 2 am Element. Tippe in der Vorschau auf ein Element, um zwischen 1 oder 2 Spalten zu wechseln, und das CSS wird aktualisiert.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.