Grid & Layout
Das UIkit-Grid-System, Container-Klassen und Abstands-Utilities für flexible Seitenlayouts.
UIkit Grid
Das Grid-System arbeitet mit uk-grid und Breiten-Klassen im Schema uk-child-width-* oder uk-width-*:
2 Spalten
1/2
1/2
3 Spalten
1/3
1/3
1/3
Gemischt: 2/3 + 1/3
2/3 (Hauptbereich)
1/3 (Sidebar)
HTML
<div class="uk-grid" uk-grid>
<div class="uk-width-1-2">Linke Spalte</div>
<div class="uk-width-1-2">Rechte Spalte</div>
</div>
<!-- Auto-Layout -->
<div class="uk-child-width-1-3@m uk-grid" uk-grid>
<div>...</div>
<div>...</div>
<div>...</div>
</div>Grid-Abstände
| Klasse | Beschreibung |
|---|---|
| uk-grid-small | Kleiner Abstand (15px) |
| uk-grid | Standardabstand (30px) |
| uk-grid-medium | Mittlerer Abstand |
| uk-grid-large | Großer Abstand (50px) |
| uk-grid-collapse | Kein Abstand |
Responsive Breakpoints
| Suffix | Breakpoint | Breite |
|---|---|---|
| (kein) | Alle Bildschirme | 0px+ |
| @s | Small | 640px+ |
| @m | Medium | 960px+ |
| @l | Large | 1200px+ |
| @xl | X-Large | 1600px+ |
HTML – Responsive Spalten
<!-- 1 Spalte auf Mobile, 2 auf Tablet, 4 auf Desktop -->
<div class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-4@m uk-grid" uk-grid>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>Abstands-Utilities
| Klasse | Wirkung |
|---|---|
| uk-margin | Abstand unten (standard) |
| uk-margin-small | Kleiner Abstand unten |
| uk-margin-large | Großer Abstand unten |
| uk-margin-remove | Margin entfernen |
| uk-margin-auto | Auto-Margin (Zentrierung) |
| uk-padding | Innenabstand |
| uk-padding-remove | Padding entfernen |