Foundation XY Grid System
Flexible, responsive Grid-Layouts – vom Smartphone bis Desktop
Zwei Spalten (50/50)
Mobile: Untereinander | Tablet+: Nebeneinander
Spalte 1
Mobile: 100% Breite (small-12)
Tablet+: 50% Breite (medium-6)
Spalte 2
Mobile: 100% Breite
Tablet+: 50% Breite
Drei Spalten (33/33/33)
Mobile: Untereinander | Tablet+: 3 nebeneinander
Spalte 1
33.33% ab Tablet (medium-4)
Spalte 2
33.33% ab Tablet
Spalte 3
33.33% ab Tablet
Vier Spalten (Block Grid)
medium-up-2 large-up-4 = 2 Spalten ab Tablet, 4 ab Desktop
Feature 1
Auto-width dank Block Grid
Feature 2
Mobile: 100%
Tablet: 50%
Desktop: 25%
Feature 3
Keine Breiten-Angaben nötig!
Feature 4
Perfekt responsive!
Sidebar Layout (66/33)
Klassisches Blog-Layout mit Hauptinhalt und Sidebar
Hauptinhalt (66.67%)
Dies ist der Hauptinhalt. Er nimmt 66.67% der Breite ab Tablet ein (medium-8 = 8/12).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Sidebar (33.33%)
Die Sidebar nimmt 33.33% ab Tablet (medium-4 = 4/12).
- Navigation
- Widgets
- Zusatzinfos
- Werbung
Asymmetrisches Layout (75/25)
Große Spalte (75%)
medium-9 = 9/12 = 75%
Klein (25%)
medium-3 = 3/12 = 25%