zurück zur Übersicht
Grid Examples
4 gleiche Spalten (25% jede)
Mobile: 25% (1/4), Tablet: 25% (2/8), Desktop: 25% (3/12)
Mobile: 25% (1/4), Tablet: 25% (2/8), Desktop: 25% (3/12)
Mobile: 25% (1/4), Tablet: 25% (2/8), Desktop: 25% (3/12)
Mobile: 25% (1/4), Tablet: 25% (2/8), Desktop: 25% (3/12)
2 gleiche Spalten (50% jede)
Mobile: 50% (2/4), Tablet: 50% (4/8), Desktop: 50% (6/12)
Mobile: 50% (2/4), Tablet: 50% (4/8), Desktop: 50% (6/12)
3 Spalten (nur ab Desktop möglich)
Mobile: 100% (4/4), Tablet: 25% (2/8), Desktop: 33.33% (4/12)
Mobile: 100% (4/4), Tablet: 37.5% (3/8), Desktop: 33.33% (4/12)
Mobile: 100% (4/4), Tablet: 37.5% (3/8), Desktop: 33.33% (4/12)
Asymmetrisches Layout (2/3 + 1/3)
Mobile: 100% (4/4), Tablet: 62.5% (5/8), Desktop: 66.67% (8/12)
Mobile: 100% (4/4), Tablet: 37.5% (3/8), Desktop: 33.33% (4/12)
Korrigierte Version (LÖSUNG)
Immer 25%: (1/4), (2/8), (3/12)
Immer 25%: (1/4), (2/8), (3/12)
Immer 25%: (1/4), (2/8), (3/12)
Immer 25%: (1/4), (2/8), (3/12)
Grid-Referenz
- Mobile (< 36em): 4 Spalten → span-1=25%, span-2=50%, span-3=75%, span-4=100%
- Tablet (36em+): 8 Spalten → span-1=12.5%, span-2=25%, span-4=50%, span-8=100%
- Desktop (52em+): 12 Spalten → span-1=8.33%, span-3=25%, span-6=50%, span-12=100%
zurück zur Übersicht