Layout i siatka
System layoutu definiuje siatkę (grid), breakpointy responsywne i zasady układania elementów na stronie. To szkielet każdego interfejsu.
Co to jest?
System layoutu w Design Systemie obejmuje siatkę kolumnową (np. 12-kolumnowa), marginesy, guttery, breakpointy responsywne i zasady rozmieszczania elementów. Siatka zapewnia spójny układ na różnych rozmiarach ekranu. System definiuje też max-width kontenera, zachowanie na mobile vs desktop i zasady łamania układu.
Jak to działa?
Standardowa siatka 12-kolumnowa dzieli ekran na 12 równych kolumn z gutterami (odstępami) między nimi. Elementy zajmują określoną liczbę kolumn (np. sidebar: 3 kolumny, content: 9 kolumn). Na mniejszych ekranach siatka się adaptuje: 12 kolumn na desktop, 8 na tablet, 4 na mobile. Breakpointy definiują, kiedy następuje zmiana.
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Carbon IBM stosuje unikatową siatkę 2x Grid z kolumnami 16-wide (desktop) i gutterami 32px. Material Design 3 używa responsywnego layoutu z 4 (mobile), 8 (tablet), 12 (desktop) kolumnami. Bootstrap definiuje 6 breakpointów z 12 kolumnami.