Grid
Futurs layout-system. 12 kolumner på alla breakpoints — antalet är konstant, det är kolumnbredden som växer. Resize fönstret för att se grid och breakpoints anpassas live.
Spec & rationale
Laddar spec…
Aktuell viewport
Viewport-bredd och breakpoint uppdateras live. Resize fönstret för att se grid och breakpoints anpassas.
Grid live demo
Tolv lika breda kolumner separerade av fluid gutter (--grid-gutter). Alla breakpoints har 12 kolumner — det är bredden som växer.
Vanliga column-spans
Hur 12-kolumnen delas i praktiken. Span-värden är konstanta över breakpoints — det är innehållet som ändras vid mobile-first-omskalning.
Constrained vs fluid
Två giltiga layout-strategier — välj utifrån element-typen. Constrained har max-width 1920px och 12-kolumns grid (default för content); fluid sträcker sig kant-till-kant med clamp padding (för site-header, footer, banner). Båda visas nedanför med samma viewport-bredd så jämförelsen blir tydlig.
max-width: 1920px; margin: 0 auto;
padding: clamp(1rem, 4vw, 5rem);
Laddar tokens…