Grid System

Das Grid System von Kryzo stellt ein leichtgewichtiges, vollständig responsives 12-Spalten-Layout bereit und dient als Grundlage für den strukturierten Aufbau von Benutzeroberflächen. Es wurde speziell für modulare Anwendungen entwickelt und ermöglicht die Kombination aus festen und automatisch berechneten Spalten, ohne zusätzliche Framework-Abhängigkeiten. Neben klassischen Rasterlayouts unterstützt das System responsive Breakpoints für Desktop-, Tablet- und Smartphone-Darstellungen sowie die gezielte Steuerung von Abständen, Ausrichtungen, Sichtbarkeiten und Elementreihenfolgen direkt über HTML-Attribute.

Durch den deklarativen Ansatz können Layouts vollständig im Markup definiert werden, wodurch sich komplexe Oberflächen schnell erstellen, erweitern und warten lassen. Das Grid eignet sich sowohl für einfache Inhaltsbereiche als auch für umfangreiche Dashboards, Formulare, Admin-Oberflächen und dynamisch generierte Komponenten. Alle Grid-Elemente basieren auf nativen HTML-Strukturen und können problemlos mit bestehenden CSS-Regeln, Custom Elements oder anderen Kryzo-Komponenten kombiniert werden.

Breakpoints

/*
    Datei: assets/scss/layout/_grid.scss
    Da Breakpoints in CSS nicht direkt gesetzt wderden können,
    muss das SCSS bei Änderungen neu kompiliert werden

    Defaults:
*/
$bp-sm: 460px;      /* Alles bis dahin: Smartphone */
$bp-md: 1024px;     /* Ab $bp-sm bis dahin: Tablet */
                    /* Alles über $bp-md: PC, Laptop oder Mac */

Dynamic Grid



     auto 
     auto 
     auto

Beispiel

auto auto auto

Feste Breiten - responsiv



         PC: 4, Tablet: 6, Mobile: 12 
         PC: 8, Tablet: 6, Mobile: 12 
     auto

Beispiel

PC: 4, Tablet: 6, Mobile: 12 PC: 8, Tablet: 6, Mobile: 12

Verhalten beeinflussen

gap
    Abstand zwischen allen Grid-Elementen.

    Werte:
    - jede gültige CSS-Einheit
    - px, rem, em, %, clamp(), etc.

gap-md
    Überschreibt gap im Tablet-Bereich.

gap-sm
    Überschreibt gap im Mobile-Bereich.


align-items
    Vertikale Ausrichtung der Grid-Elemente.

    Werte:
    - start
    - center
    - end
    - stretch
    - baseline

align-items-md
    Überschreibt align-items im Tablet-Bereich.

align-items-sm
    Überschreibt align-items im Mobile-Bereich.


justify-content
    Horizontale Ausrichtung des gesamten Grids.

    Werte:
    - start
    - center
    - end
    - space-between
    - space-around
    - space-evenly

justify-content-md
    Überschreibt justify-content im Tablet-Bereich.

justify-content-sm
    Überschreibt justify-content im Mobile-Bereich.


auto
    Aktiviert den Auto-Grid-Modus. Die Spaltenbreite wird automatisch anhand der verfügbaren Breite berechnet.

    Verwendung:
     ... 

order-xl
    Reihenfolge des Elements im Desktop-Bereich.

    Werte:
    - 1 bis 20

order-md
    Reihenfolge des Elements im Tablet-Bereich.

    Werte:
    - 1 bis 20

order-sm
    Reihenfolge des Elements im Mobile-Bereich.

    Werte:
    - 1 bis 20


hide-xl
    Blendet das Element im Desktop-Bereich aus.

hide-md
    Blendet das Element im Tablet-Bereich aus.

hide-sm
    Blendet das Element im Mobile-Bereich aus.