Layout Showcase
Flex Layouts
Composition classes like flex:cluster, flex:stack, etc., combined with utilities like gap:*, align:*, and justify:*.
flex:cluster gap:sm
Wraps horizontally
Item 1
Item 2
Item 3
Item 4
Item 5
flex:stack gap:xs align:center
Vertical stack
Top
Middle
Bottom
flex:split-row gap:md
Binary split
Left item
Right item
flex:split-col gap:sm
Binary split vertical
Top item
Bottom item
flex:spread-column gap:sm justify:between
Space between
Top
Middle
Bottom
flex:flank-start gap:md
Sidebar left
Sidebar
Main content fills remaining space (wraps when <50%)
flex:flank-end gap:md
Sidebar right
Main content fills remaining space (wraps when <50%)
Sidebar
flex:flank-start with --flank-size: 200px
Fixed sidebar
200px sidebar
Main content
Grid Layouts
Composition classes like grid:lcr, grid:auto-fit, etc., with utilities like gap:*.
grid:lcr gap:md
True center
Short
Center (always centered)
Much longer right side content
grid:tmb gap:sm
True middle
Short top
Middle (always centered)
Taller bottom section
with more content
with more content
grid:auto-fit gap:sm
Responsive columns
Item 1
Item 2
Item 3
Item 4
Item 5
grid:hero gap:xs
3x3 layout
Header
Left
Main
Right
Footer
Frame (Aspect Ratio)
Maintain aspect ratios with frame:* classes.
frame:square
Square
frame:landscape
16:9
frame:portrait
9:16
Utility Combinations
Mix utilities for custom layouts, e.g., wrap gap:lg align:center justify:around.
wrap gap:lg align:center justify:around
Custom flex
Item 1
Item 2
Item 3
Item 4