geekinney/ebox-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use canonical Box tags in Ebox examples

Browse Source
This commit is contained in:
Kinneyzhang 2026-08-26 16:26:03 +08:00
parent 5d1e38856f
commit 5a176ff427
6 changed files with 304 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/comprehensive.ebox
View File

@ -1,17 +1,17 @@
(column
(box :layout 'column
(box :content "Ebox comprehensive DSL showcase\nThe outer sections omit :width so Playground viewport sizing drives the layout."
:padding '(1 (16)) :border "#334155"
:bgcolor "#F8FAFC" :color "#0F172A" :text-align 'center)
(spacer :width '(viewport) :height 1 :bgcolor "#F8FAFC")
(box :width '(viewport) :height 1 :bgcolor "#F8FAFC")
(box :content "Width rule in this file\nContainer sections use auto width. Fixed widths remain only where the example demonstrates exact item sizing, basis, min-width, or max-width."
:padding '(0 (14)) :border "#64748B"
:bgcolor "#F8FAFC" :color "#111827" :wrap-mode 'word)
(spacer :width '(viewport) :height 1 :bgcolor "#F8FAFC")
(box :width '(viewport) :height 1 :bgcolor "#F8FAFC")
(flex
(box :layout 'flex
:margin '(1 0 0 1) :padding '(1 (8))
:border "#475569" :bgcolor "#F8FAFC"
:flex-flow '(row wrap)

246
examples/flex-reference.ebox
View File

@ -1,366 +1,366 @@
(column
(box :layout 'column
:height '(viewport-height)
:width '(viewport) :overflow 'scroll :bgcolor "#FAF7F0"
(box :content "Ebox CSS Flex Reference\nA modern, self-explaining DSL gallery for CSS flex container and item properties."
:padding '(1 (24)) :border "#2F3437"
:bgcolor "#FAF7F0" :color "#1F2328" :text-align 'center)
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :flex-direction\nMain axis selection. Reverse values swap main-start and main-end while keeping source order intact."
:padding '(0 (18)) :border "#D97757"
:bgcolor "#FFF5ED" :color "#3D2B1F")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
(box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
:border "#D97757" :border-top-p nil
:bgcolor "#FFF8F2"
(column
(box :layout 'column
(box :content "row" :width '(220) :padding '(0 (10)) :border "#D97757"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :width '(220) :height 4 :padding '(0 (8)) :border "#D97757"
(box :layout 'flex :width '(220) :height 4 :padding '(0 (8)) :border "#D97757"
:border-top-p nil
:bgcolor "#FFF8F2" :flex-direction 'row :column-gap '(10) :align-items 'center
(item (box :content "A" :width '(42) :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(42) :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(42) :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "row-reverse" :width '(220) :padding '(0 (10)) :border "#D97757"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :width '(220) :height 4 :padding '(0 (8)) :border "#D97757"
(box :layout 'flex :width '(220) :height 4 :padding '(0 (8)) :border "#D97757"
:border-top-p nil
:bgcolor "#FFF8F2" :flex-direction 'row-reverse :column-gap '(10) :align-items 'center
(item (box :content "A" :width '(42) :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(42) :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(42) :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "column" :width '(220) :padding '(0 (10)) :border "#D97757"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :width '(220) :height 6 :padding '(0 (8)) :border "#D97757"
(box :layout 'flex :width '(220) :height 6 :padding '(0 (8)) :border "#D97757"
:border-top-p nil
:bgcolor "#FFF8F2" :flex-direction 'column :row-gap 1 :align-items 'stretch
(item (box :content "A" :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center))
(item (box :content "B" :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center))
(item (box :content "C" :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "column-reverse" :width '(220) :padding '(0 (10)) :border "#D97757"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :width '(220) :height 6 :padding '(0 (8)) :border "#D97757"
(box :layout 'flex :width '(220) :height 6 :padding '(0 (8)) :border "#D97757"
:border-top-p nil
:bgcolor "#FFF8F2" :flex-direction 'column-reverse :row-gap 1 :align-items 'stretch
(item (box :content "A" :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center))
(item (box :content "B" :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center))
(item (box :content "C" :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center)))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :flex-wrap\nLine creation. nowrap keeps one flex line; wrap creates new lines; wrap-reverse stacks lines from the opposite cross side."
:padding '(0 (18)) :border "#5E7F6A"
:bgcolor "#F3FAF4" :color "#24352A")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
(box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
:border "#5E7F6A" :border-top-p nil
:bgcolor "#F8FCF8"
(column
(box :layout 'column
(box :content "nowrap" :max-width '(293) :padding '(0 (10)) :border "#5E7F6A"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A"
(box :layout 'flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A"
:border-top-p nil
:bgcolor "#F8FCF8" :flex-wrap 'nowrap :column-gap '(8) :align-items 'center
(item :flex-shrink 1 (box :content "A" :width '(92) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center))
(item :flex-shrink 1 (box :content "B" :width '(92) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center))
(item :flex-shrink 1 (box :content "C" :width '(92) :height 1 :bgcolor "#8FAF95" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "wrap" :max-width '(293) :padding '(0 (10)) :border "#5E7F6A"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A"
(box :layout 'flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A"
:border-top-p nil
:bgcolor "#F8FCF8" :flex-wrap 'wrap :column-gap '(8) :row-gap 1
(item :flex-shrink 0 (box :content "A 118" :width '(118) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center))
(item :flex-shrink 0 (box :content "B 118" :width '(118) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center))
(item :flex-shrink 0 (box :content "C 118" :width '(118) :height 1 :bgcolor "#8FAF95" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "wrap-reverse" :max-width '(293) :padding '(0 (10)) :border "#5E7F6A"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A"
(box :layout 'flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A"
:border-top-p nil
:bgcolor "#F8FCF8" :flex-wrap 'wrap-reverse :column-gap '(8) :row-gap 1
(item :flex-shrink 0 (box :content "A 118" :width '(118) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center))
(item :flex-shrink 0 (box :content "B 118" :width '(118) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center))
(item :flex-shrink 0 (box :content "C 118" :width '(118) :height 1 :bgcolor "#8FAF95" :color "#1F2328" :text-align 'center)))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :flex-flow\nShorthand for direction and wrapping. These examples use one property to set both behaviors."
:padding '(0 (18)) :border "#6F6A95"
:bgcolor "#F7F4FC" :color "#2F2B45")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
(box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
:border "#6F6A95" :border-top-p nil
:bgcolor "#FBF9FF"
(column
(box :layout 'column
(box :content ":flex-flow (row wrap)" :max-width '(440) :padding '(0 (10))
:border "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :max-width '(440) :padding '(0 (8)) :border "#6F6A95"
(box :layout 'flex :max-width '(440) :padding '(0 (8)) :border "#6F6A95"
:border-top-p nil
:bgcolor "#FBF9FF" :flex-flow '(row wrap) :gap '(1 (12))
(item (box :content "A" :width '(170) :height 1 :bgcolor "#E4DEF4" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(170) :height 1 :bgcolor "#CBC2E3" :color "#1F2328" :text-align 'center))
(item (box :content "C wraps" :width '(170) :height 1 :bgcolor "#AFA3D1" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content ":flex-flow (column wrap)" :max-width '(440) :padding '(0 (10))
:border "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :max-width '(440) :padding '(0 (8)) :border "#6F6A95"
(box :layout 'flex :max-width '(440) :padding '(0 (8)) :border "#6F6A95"
:border-top-p nil
:bgcolor "#FBF9FF" :flex-flow '(column wrap) :gap '(1 (12))
(item (box :content "A" :width '(140) :height 1 :bgcolor "#E4DEF4" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(140) :height 1 :bgcolor "#CBC2E3" :color "#1F2328" :text-align 'center))
(item (box :content "C new column" :width '(140) :height 1 :bgcolor "#AFA3D1" :color "#1F2328" :text-align 'center)))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :justify-content\nMain-axis packing after sizing. Distributed values change the space before, between, and after items."
:padding '(0 (18)) :border "#3F6D88"
:bgcolor "#F1F8FB" :color "#20313A")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
(box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
:border "#3F6D88" :border-top-p nil
:bgcolor "#F6FBFD"
(column
(box :layout 'column
(box :content "flex-start" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'flex-start
(box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'flex-start
(item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "center" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'center
(box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'center
(item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "flex-end" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'flex-end
(box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'flex-end
(item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "space-between" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-between
(box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-between
(item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "space-around" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-around
(box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-around
(item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "space-evenly" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-evenly
(box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-evenly
(item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "start" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'start
(box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'start
(item (box :content "start" :width '(70) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "end" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'end
(box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'end
(item (box :content "end" :width '(70) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "left" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'left
(box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'left
(item (box :content "left" :width '(70) :height 1 :bgcolor "#7DB8CE" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "right" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'right
(box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'right
(item (box :content "right" :width '(70) :height 1 :bgcolor "#5F9CB5" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "normal" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'normal
(box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'normal
(item (box :content "normal" :width '(70) :height 1 :bgcolor "#3F6D88" :color "#FFFFFF" :text-align 'center)))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :align-items\nCross-axis alignment inside each flex line. Stretch/normal enlarge auto-sized items; start/end/center move shorter ones."
:padding '(0 (18)) :border "#9A6B43"
:bgcolor "#FFF7EE" :color "#3A2A1D")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
(box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
:border "#9A6B43" :border-top-p nil
:bgcolor "#FFFAF5"
(column
(box :layout 'column
(box :content "flex-start" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'flex-start
(box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'flex-start
(item (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center))
(item (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "center" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'center
(box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'center
(item (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center))
(item (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "flex-end" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'flex-end
(box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'flex-end
(item (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center))
(item (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "stretch" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'stretch
(box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'stretch
(item (box :content "auto height stretches" :width '(72) :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center))
(item (box :content "line height" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "baseline" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'baseline
(box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'baseline
(item (box :content "baseline" :width '(90) :height 1 :bgcolor "#BA8456" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "start" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'start
(box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'start
(item (box :content "start" :width '(62) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "end" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'end
(box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'end
(item (box :content "end" :width '(62) :height 1 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "self-start" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'self-start
(box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'self-start
(item (box :content "self-start" :width '(78) :height 1 :bgcolor "#BA8456" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "self-end" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'self-end
(box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'self-end
(item (box :content "self-end" :width '(70) :height 1 :bgcolor "#9A6B43" :color "#FFFFFF" :text-align 'center))))
(column
(box :layout 'column
(box :content "normal" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'normal
(box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'normal
(item (box :content "normal" :width '(62) :bgcolor "#7A5132" :color "#FFFFFF" :text-align 'center))))
(column
(box :layout 'column
(box :content "stretch note" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(box :content "normal behaves stretch-like for auto cross size in this DSL." :width '(146)
:height 4 :padding '(0 (8)) :border "#9A6B43" :border-top-p nil
:bgcolor "#FFFAF5" :color "#3A2A1D")))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :align-content\nCross-axis packing between multiple flex lines. It has no visible effect on a nowrap single-line container."
:padding '(0 (18)) :border "#7C6A2F"
:bgcolor "#FBF8E8" :color "#362F16")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
(box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
:border "#7C6A2F" :border-top-p nil
:bgcolor "#FFFDF0"
(column
(box :layout 'column
(box :content "flex-start" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'wrap :align-content 'flex-start :row-gap 1 :column-gap '(8)
(item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "center" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'wrap :align-content 'center :row-gap 1 :column-gap '(8)
(item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "flex-end" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'wrap :align-content 'flex-end :row-gap 1 :column-gap '(8)
(item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "space-between" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'wrap :align-content 'space-between :row-gap 1 :column-gap '(8)
(item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "space-around" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'wrap :align-content 'space-around :row-gap 1 :column-gap '(8)
(item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "space-evenly" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'wrap :align-content 'space-evenly :row-gap 1 :column-gap '(8)
(item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "stretch" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'wrap :align-content 'stretch :row-gap 1 :column-gap '(8)
(item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "start" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'wrap :align-content 'start :row-gap 1 :column-gap '(8)
(item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "end" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'wrap :align-content 'end :row-gap 1 :column-gap '(8)
(item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "baseline" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'wrap :align-content 'baseline :row-gap 1 :column-gap '(8)
(item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "normal" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'wrap :align-content 'normal :row-gap 1 :column-gap '(8)
(item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "nowrap note" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center)
(flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
(box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0"
:flex-wrap 'nowrap :align-content 'normal :row-gap 1 :column-gap '(8)
(item (box :content "single line" :width '(96) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container properties: :gap, :row-gap, :column-gap\n:gaps define spacing between flex items and flex lines. Explicit row/column values override matching sides."
:padding '(0 (18)) :border "#3D7068"
:bgcolor "#F1FAF8" :color "#1D3935")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
(box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12))
:border "#3D7068" :border-top-p nil
:bgcolor "#F7FCFB"
(column
(box :layout 'column
(box :content ":gap (1 (14))" :max-width '(293) :padding '(0 (10)) :border "#3D7068"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :max-width '(293)
(box :layout 'flex :max-width '(293)
:border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB"
:flex-wrap 'wrap :gap '(1 (14))
(item (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(104) :height 1 :bgcolor "#71BDB0" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content ":row-gap 2" :max-width '(293) :padding '(0 (10)) :border "#3D7068"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :max-width '(293) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB"
(box :layout 'flex :max-width '(293) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB"
:flex-wrap 'wrap :row-gap 2 :column-gap '(8)
(item (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(104) :height 1 :bgcolor "#71BDB0" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content ":column-gap (32)" :max-width '(293) :padding '(0 (10)) :border "#3D7068"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center)
(flex :max-width '(293) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB"
(box :layout 'flex :max-width '(293) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB"
:flex-wrap 'wrap :row-gap 1 :column-gap '(32)
(item (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center))
(item (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center))
(item (box :content "C" :width '(104) :height 1 :bgcolor "#71BDB0" :color "#1F2328" :text-align 'center)))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Item property: :order\nVisual ordering sorts by :order, then source order. The labels expose both values."
:padding '(0 (18)) :border "#8E4A63"
:bgcolor "#FFF4F7" :color "#3A1F2A")
(flex :height 5 :padding '(0 (12)) :border "#8E4A63"
(box :layout 'flex :height 5 :padding '(0 (12)) :border "#8E4A63"
:border-top-p nil
:bgcolor "#FFF8FA" :column-gap '(12) :align-items 'center
(item :order 3 (box :content "source 1\n:order 3" :width '(150) :height 2 :bgcolor "#F2C4D2" :color "#1F2328" :text-align 'center))
@ -368,46 +368,46 @@
(item :order 2 (box :content "source 3\n:order 2" :width '(150) :height 2 :bgcolor "#C87F9A" :color "#1F2328" :text-align 'center))
(item :order 1 (box :content "source 4\nsame order" :width '(150) :height 2 :bgcolor "#A95F7C" :color "#FFFFFF" :text-align 'center)))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Item sizing: :flex-grow, :flex-shrink, :flex-basis, and child :width\nFlex starts from basis or width/content, then distributes positive or negative space."
:padding '(0 (18)) :border "#2F5F7C"
:bgcolor "#F1F8FC" :color "#1C303D")
(column
(box :layout 'column
(box :content "Grow factors: same basis, different growth weights."
:padding '(0 (12)) :border "#2F5F7C" :border-top-p nil
:bgcolor "#FFFDF8" :color "#3D3A35")
(flex :padding '(0 (12)) :border "#2F5F7C"
(box :layout 'flex :padding '(0 (12)) :border "#2F5F7C"
:border-top-p nil
:bgcolor "#F8FCFE" :column-gap '(10)
(item :flex-grow 1 :flex-basis '(120) (box :content "grow 1\nbasis 120" :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center))
(item :flex-grow 2 :flex-basis '(120) (box :content "grow 2\nbasis 120" :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center))
(item :flex-grow 3 :flex-basis '(120) (box :content "grow 3\nbasis 120" :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "Shrink factors: overflowing bases lose space by weighted shrink."
:padding '(0 (12)) :border "#2F5F7C" :border-top-p nil
:bgcolor "#FFFDF8" :color "#3D3A35")
(flex :padding '(0 (12)) :border "#2F5F7C"
(box :layout 'flex :padding '(0 (12)) :border "#2F5F7C"
:border-top-p nil
:bgcolor "#F8FCFE" :column-gap '(10)
(item :flex-shrink 1 :flex-basis '(320) (box :content "shrink 1\nbasis 320" :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center))
(item :flex-shrink 3 :flex-basis '(320) (box :content "shrink 3\nbasis 320" :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center))
(item :flex-shrink 5 :flex-basis '(320) (box :content "shrink 5\nbasis 320" :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "Basis versus width: explicit basis overrides width; auto basis uses width/content."
:padding '(0 (12)) :border "#2F5F7C" :border-top-p nil
:bgcolor "#FFFDF8" :color "#3D3A35")
(flex :padding '(0 (12)) :border "#2F5F7C"
(box :layout 'flex :padding '(0 (12)) :border "#2F5F7C"
:border-top-p nil
:bgcolor "#F8FCFE" :column-gap '(10)
(item :flex-basis '(120) (box :content "basis 120\nwidth 240" :width '(240) :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center))
(item :flex-basis 'auto (box :content "basis auto\nwidth 240" :width '(240) :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center))
(item :flex '(1 1 (160)) (box :content "flex tuple\nbasis 160" :width '(240) :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center))))
(column
(box :layout 'column
(box :content "Intrinsic basis keywords: content, min-content, and max-content derive size from text."
:padding '(0 (12)) :border "#2F5F7C" :border-top-p nil
:bgcolor "#FFFDF8" :color "#3D3A35")
(flex :padding '(0 (12)) :border "#2F5F7C"
(box :layout 'flex :padding '(0 (12)) :border "#2F5F7C"
:border-top-p nil
:bgcolor "#F8FCFE" :flex-wrap 'wrap :row-gap 1 :column-gap '(10)
(item :flex-shrink 0 :flex-basis 'content
@ -417,12 +417,12 @@
(item :flex-shrink 0 :flex-basis 'max-content
(box :content "max-content\nkeeps phrase width" :width '(180) :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Item property: :flex shorthand\nSupported forms: number, none, auto, initial, and (grow shrink basis). Longhands can override shorthand parts."
:padding '(0 (18)) :border "#52612F"
:bgcolor "#F8FAEF" :color "#293116")
(flex :height 7 :padding '(0 (12)) :border "#52612F"
(box :layout 'flex :height 7 :padding '(0 (12)) :border "#52612F"
:border-top-p nil
:bgcolor "#FCFDF6" :flex-wrap 'wrap :row-gap 1 :column-gap '(8) :align-items 'center
(item :flex 1 (box :content ":flex 1\n= 1 1 0" :bgcolor "#DDE8B2" :color "#1F2328" :text-align 'center))
@ -432,12 +432,12 @@
(item :flex '(2 1 (120)) :flex-basis '(160)
(box :content ":flex (2 1 120)\nthen basis 160" :bgcolor "#66762D" :color "#FFFFFF" :text-align 'center)))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Item property: :align-self\nPer-item cross-axis override. auto inherits :align-items; other values replace the container setting."
:padding '(0 (18)) :border "#7B4D38"
:bgcolor "#FFF6F0" :color "#392319")
(flex :height 7 :padding '(0 (12)) :border "#7B4D38"
(box :layout 'flex :height 7 :padding '(0 (12)) :border "#7B4D38"
:border-top-p nil
:bgcolor "#FFFAF7" :align-items 'flex-start
:flex-wrap 'wrap :row-gap 1 :column-gap '(10)
@ -447,7 +447,7 @@
(item :align-self 'flex-end (box :content "flex-end" :width '(118) :height 2 :bgcolor "#9D6048" :color "#FFFFFF" :text-align 'center))
(item :align-self 'stretch (box :content "stretch\nauto cross" :width '(118) :bgcolor "#7B4D38" :color "#FFFFFF" :text-align 'center))
(item :align-self 'normal (box :content "normal\nstretch-like" :width '(118) :bgcolor "#5D3929" :color "#FFFFFF" :text-align 'center)))
(flex :height 6 :padding '(0 (12)) :border "#7B4D38"
(box :layout 'flex :height 6 :padding '(0 (12)) :border "#7B4D38"
:border-top-p nil
:bgcolor "#FFFAF7" :align-items 'flex-start
:flex-wrap 'wrap :row-gap 1 :column-gap '(10)
@ -457,7 +457,7 @@
(item :align-self 'self-end (box :content "self-end" :width '(118) :height 2 :bgcolor "#9D6048" :color "#FFFFFF" :text-align 'center))
(item :align-self 'baseline (box :content "baseline" :width '(118) :height 2 :bgcolor "#7B4D38" :color "#FFFFFF" :text-align 'center)))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Summary\nUse direction and wrap to create lines, basis/width to choose starting sizes, grow/shrink to distribute space, then justify/align properties to pack items and lines."
:padding '(1 (24)) :border "#2F3437"

300
examples/grid-reference.ebox
View File

@ -1,4 +1,4 @@
(column
(box :layout 'column
:height '(viewport-height)
:width '(viewport)
(box :content "Ebox CSS Grid Reference\nA complete, self-explaining gallery of the public Ebox Grid properties and value forms."
@ -6,60 +6,60 @@
:color "#20252B" :bgcolor "#FFFDF8"
:face 'bold :text-align 'center)
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :grid-template-columns\nTrack sizing accepts fixed sizes, auto, fractional tracks, minmax, and repeat."
:padding '(0 (18)) :border "#B85C3C"
:bgcolor "#F1D4C9" :color "#4C271D" :wrap-mode 'word)
(grid :grid-template-columns '((206) (206) (206))
(box :layout 'grid :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between
:padding '(0 (12)) :border "#B85C3C" :border-top-p nil
:bgcolor "#FFF9F4"
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "fixed\n:((120) (74))" :padding '(0 (6))
:border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center)
(grid :width '(206) :height 3 :padding '(0 (2))
(box :layout 'grid :width '(206) :height 3 :padding '(0 (2))
:grid-template-columns '((120) (74)) :grid-template-rows '(2)
:gap '(0 (6)) :border "#B85C3C" :bgcolor "#FFF8F2"
(box :content "120 PX" :bgcolor "#F1D0AF" :color "#3D2B1F" :text-align 'center)
(box :content "74 PX" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "auto\nauto tracks use intrinsic content" :padding '(0 (6))
:border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center)
(grid :width '(206) :height 3 :padding '(0 (6))
(box :layout 'grid :width '(206) :height 3 :padding '(0 (6))
:grid-template-columns '(auto auto) :grid-template-rows '(2)
:gap '(0 (6)) :border "#B85C3C" :bgcolor "#FFF8F2"
(box :content "intrinsic" :bgcolor "#F1D0AF" :color "#3D2B1F" :text-align 'center)
(box :content "content" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "fractional symbols\n1fr distributes by weight" :padding '(0 (6))
:border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center)
(grid :width '(206) :height 3 :padding '(0 (6))
(box :layout 'grid :width '(206) :height 3 :padding '(0 (6))
:grid-template-columns '(1fr 2fr) :grid-template-rows '(2)
:gap '(0 (6)) :border "#B85C3C" :bgcolor "#FFF8F2"
(box :content "1FR" :bgcolor "#F1D0AF" :color "#3D2B1F" :text-align 'center)
(box :content "2FR" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "fractional forms\n(fr FACTOR) is equivalent to NFR" :padding '(0 (6))
:border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center)
(grid :width '(206) :height 3 :padding '(0 (6))
(box :layout 'grid :width '(206) :height 3 :padding '(0 (6))
:grid-template-columns '((fr 1) (fr 2)) :grid-template-rows '(2)
:gap '(0 (6)) :border "#B85C3C" :bgcolor "#FFF8F2"
(box :content "(fr 1)" :bgcolor "#F1D0AF" :color "#3D2B1F" :text-align 'center)
(box :content "(fr 2)" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "minmax\nminimum protects a readable track" :padding '(0 (6))
:border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center)
(grid :width '(206) :height 3 :padding '(0 (6))
(box :layout 'grid :width '(206) :height 3 :padding '(0 (6))
:grid-template-columns '((minmax (74) (120)) (74))
:grid-template-rows '(2) :gap '(0 (6))
:border "#B85C3C" :bgcolor "#FFF8F2"
(box :content "74 → 120" :bgcolor "#F1D0AF" :color "#3D2B1F" :text-align 'center)
(box :content "fixed" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "repeat\nrepeat 2 visibly expands the template" :padding '(0 (6))
:border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center)
(grid :width '(206) :height 3 :padding '(0 (6))
(box :layout 'grid :width '(206) :height 3 :padding '(0 (6))
:grid-template-columns '((repeat 2 (62)) (fr 1))
:grid-template-rows '(2) :gap '(0 (6))
:border "#B85C3C" :bgcolor "#FFF8F2"
@ -67,60 +67,60 @@
(box :content "REPEAT B" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center)
(box :content "FR" :bgcolor "#BF7F63" :color "#FFFFFF" :text-align 'center))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :grid-template-rows\nThe same track grammar works on the block axis; fixed lines, auto sizing, fractions, minmax, and repeat are shown independently."
:padding '(0 (18)) :border "#537A63"
:bgcolor "#DCEBDD" :color "#26402F" :wrap-mode 'word)
(grid :grid-template-columns '((206) (206) (206))
(box :layout 'grid :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between
:padding '(0 (12)) :border "#537A63" :border-top-p nil
:bgcolor "#F7FBF7"
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "fixed rows\n(1 2)" :padding '(0 (6))
:border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center)
(grid :width '(206) :height 5 :padding '(0 (6))
(box :layout 'grid :width '(206) :height 5 :padding '(0 (6))
:grid-template-columns '((192)) :grid-template-rows '(1 2)
:gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8"
(box :content "ROW 1" :bgcolor "#DCEBDD" :color "#26402F" :text-align 'center)
(box :content "ROW 2" :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "auto rows\nintrinsic line heights" :padding '(0 (6))
:border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center)
(grid :width '(206) :height 5 :padding '(0 (6))
(box :layout 'grid :width '(206) :height 5 :padding '(0 (6))
:grid-template-columns '((192)) :grid-template-rows '(auto auto)
:gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8"
(box :content "short" :height 1 :bgcolor "#DCEBDD" :color "#26402F" :text-align 'center)
(box :content "tall\ncontent" :height 2 :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "fractional rows\n1fr / 2fr" :padding '(0 (6))
:border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center)
(grid :width '(206) :height 6 :padding '(0 (6))
(box :layout 'grid :width '(206) :height 6 :padding '(0 (6))
:grid-template-columns '((192)) :grid-template-rows '(1fr 2fr)
:gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8"
(box :content "1FR" :bgcolor "#DCEBDD" :color "#26402F" :text-align 'center)
(box :content "2FR" :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "fractional row forms\n(fr 1) / (fr 2)" :padding '(0 (6))
:border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center)
(grid :width '(206) :height 6 :padding '(0 (6))
(box :layout 'grid :width '(206) :height 6 :padding '(0 (6))
:grid-template-columns '((192)) :grid-template-rows '((fr 1) (fr 2))
:gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8"
(box :content "(fr 1)" :bgcolor "#DCEBDD" :color "#26402F" :text-align 'center)
(box :content "(fr 2)" :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "minmax rows\n(min 1 / max 3)" :padding '(0 (6))
:border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center)
(grid :width '(206) :height 6 :padding '(0 (6))
(box :layout 'grid :width '(206) :height 6 :padding '(0 (6))
:grid-template-columns '((192))
:grid-template-rows '((minmax (1) (3)) 1)
:gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8"
(box :content "MINMAX" :bgcolor "#DCEBDD" :color "#26402F" :text-align 'center)
(box :content "FIXED" :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "repeat rows\nrepeat 3 expands lines" :padding '(0 (6))
:border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center)
(grid :width '(206) :height 6 :padding '(0 (6))
(box :layout 'grid :width '(206) :height 6 :padding '(0 (6))
:grid-template-columns '((192))
:grid-template-rows '((repeat 3 (1)))
:gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8"
@ -128,49 +128,49 @@
(box :content "ROW B" :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center)
(box :content "ROW C" :bgcolor "#7EA887" :color "#FFFFFF" :text-align 'center))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container properties: :grid-auto-columns and :grid-auto-rows\nImplicit tracks use the same fixed, auto, fractional, and minmax track forms. Ebox resolves one normalized implicit track at a time."
:padding '(0 (18)) :border "#416E8A"
:bgcolor "#D9EAF2" :color "#203A4A" :wrap-mode 'word)
(grid :grid-template-columns '((206) (206) (206))
(box :layout 'grid :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between
:padding '(0 (12)) :border "#416E8A" :border-top-p nil
:bgcolor "#F6FBFD"
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "auto-columns · fixed\n:grid-auto-columns ((64))" :padding '(0 (6))
:border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((64))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((64))
:grid-template-rows '(1 1) :grid-auto-columns '((64))
:grid-auto-flow 'column :gap '(0 (6))
:border "#416E8A" :bgcolor "#F8FCFE"
(box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center)
(box :content "B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(box :content "C" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "auto-columns · auto\nintrinsic implicit width" :padding '(0 (6))
:border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((64))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((64))
:grid-template-rows '(1 1) :grid-auto-columns 'auto
:grid-auto-flow 'column :gap '(0 (6))
:border "#416E8A" :bgcolor "#F8FCFE"
(box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center)
(box :content "LONG C" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center)
(box :content "C" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "auto-columns · 1fr\nimplicit remainder" :padding '(0 (6))
:border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((64))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((64))
:grid-template-rows '(1 1) :grid-auto-columns '1fr
:grid-auto-flow 'column :gap '(0 (6))
:border "#416E8A" :bgcolor "#F8FCFE"
(box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center)
(box :content "1FR" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center)
(box :content "C" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "auto-columns · minmax\nminimum implicit width" :padding '(0 (6))
:border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((64))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((64))
:grid-template-rows '(1 1)
:grid-auto-columns '((minmax (64) (120)))
:grid-auto-flow 'column :gap '(0 (6))
@ -178,37 +178,37 @@
(box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center)
(box :content "MINMAX" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center)
(box :content "C" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "auto-rows · fixed\n:grid-auto-rows 2" :padding '(0 (6))
:border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((94) (94))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94))
:grid-template-rows '(1) :grid-auto-rows 2 :gap '(0 (6))
:border "#416E8A" :bgcolor "#F8FCFE"
(box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center)
(box :content "B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(box :content "AUTO ROW" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "auto-rows · auto\nintrinsic implicit height" :padding '(0 (6))
:border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((94) (94))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94))
:grid-template-rows '(1) :grid-auto-rows 'auto :gap '(0 (6))
:border "#416E8A" :bgcolor "#F8FCFE"
(box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center)
(box :content "B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(box :content "TALL\nAUTO ROW" :height 2 :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "auto-rows · 1fr\nimplicit remainder" :padding '(0 (6))
:border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(grid :width '(206) :height 6 :grid-template-columns '((94) (94))
(box :layout 'grid :width '(206) :height 6 :grid-template-columns '((94) (94))
:grid-template-rows '(1) :grid-auto-rows '1fr :gap '(0 (6))
:border "#416E8A" :bgcolor "#F8FCFE"
(box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center)
(box :content "B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(box :content "1FR ROW" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "auto-rows · minmax\nbounded implicit height" :padding '(0 (6))
:border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(grid :width '(206) :height 6 :grid-template-columns '((94) (94))
(box :layout 'grid :width '(206) :height 6 :grid-template-columns '((94) (94))
:grid-template-rows '(1)
:grid-auto-rows '((minmax (1) (3))) :gap '(0 (6))
:border "#416E8A" :bgcolor "#F8FCFE"
@ -216,29 +216,29 @@
(box :content "B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(box :content "MINMAX ROW" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :grid-auto-flow\nAutomatic placement is row-major or column-major. Ebox intentionally supports row and column, not the browser dense variants."
:padding '(0 (18)) :border "#416E8A"
:bgcolor "#D9EAF2" :color "#203A4A" :wrap-mode 'word)
(grid :grid-template-columns '((206) (206))
(box :layout 'grid :grid-template-columns '((206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between
:padding '(0 (12)) :border "#416E8A" :border-top-p nil
:bgcolor "#F6FBFD"
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "row\nfills each row before creating the next" :padding '(0 (6))
:border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((94) (94))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94))
:grid-template-rows '(1 1) :grid-auto-flow 'row :gap '(0 (6))
:border "#416E8A" :bgcolor "#F8FCFE"
(box :content "1A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center)
(box :content "1B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(box :content "2A" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center)
(box :content "2B" :bgcolor "#8DBDCE" :color "#203A4A" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "column\nfills each column before creating the next" :padding '(0 (6))
:border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((94))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94))
:grid-template-rows '(1 1) :grid-auto-columns '((94))
:grid-auto-flow 'column :gap '(0 (6))
:border "#416E8A" :bgcolor "#F8FCFE"
@ -247,64 +247,64 @@
(box :content "C2/R1" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center)
(box :content "C2/R2" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container properties: :gap, :row-gap, :column-gap\nThe shorthand accepts one shared value or a row/column pair. Longhands override the matching side; grid-row-gap and grid-column-gap remain public aliases."
:padding '(0 (18)) :border "#3D7068"
:bgcolor "#CDEBE5" :color "#1D3935" :wrap-mode 'word)
(grid :grid-template-columns '((206) (206) (206))
(box :layout 'grid :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between
:padding '(0 (12)) :border "#3D7068" :border-top-p nil
:bgcolor "#F7FCFB"
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "gap scalar\n:gap 1" :padding '(0 (6))
:border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((94) (94))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94))
:grid-template-rows '(1 1) :gap 1
:border "#3D7068" :bgcolor "#F7FCFB"
(box :content "A" :bgcolor "#CDEBE5" :color "#1D3935" :text-align 'center)
(box :content "B" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(box :content "C" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "gap pair\n:gap (1 (14))" :padding '(0 (6))
:border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((94) (94))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94))
:grid-template-rows '(1 1) :gap '(1 (14))
:border "#3D7068" :bgcolor "#F7FCFB"
(box :content "ROW GAP" :bgcolor "#CDEBE5" :color "#1D3935" :text-align 'center)
(box :content "COLUMN GAP" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(box :content "PAIR" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "row-gap\n:row-gap 2" :padding '(0 (6))
:border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((94) (94))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94))
:grid-template-rows '(1 1) :row-gap 2 :column-gap '(8)
:border "#3D7068" :bgcolor "#F7FCFB"
(box :content "A" :bgcolor "#CDEBE5" :color "#1D3935" :text-align 'center)
(box :content "B" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(box :content "ROW 2" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "column-gap\n:column-gap (28)" :padding '(0 (6))
:border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((88) (88))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((88) (88))
:grid-template-rows '(1 1) :row-gap 1 :column-gap '(28)
:border "#3D7068" :bgcolor "#F7FCFB"
(box :content "LEFT" :bgcolor "#CDEBE5" :color "#1D3935" :text-align 'center)
(box :content "RIGHT" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(box :content "LONG GAP" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "aliases\n:grid-row-gap / :grid-column-gap" :padding '(0 (6))
:border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((88) (88))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((88) (88))
:grid-template-rows '(1 1) :grid-row-gap 2 :grid-column-gap '(28)
:border "#3D7068" :bgcolor "#F7FCFB"
(box :content "ROW ALIAS" :bgcolor "#CDEBE5" :color "#1D3935" :text-align 'center)
(box :content "COLUMN ALIAS" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(box :content "OVERRIDE" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "override\nexplicit sides win over :gap" :padding '(0 (6))
:border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((88) (88))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((88) (88))
:grid-template-rows '(1 1) :gap '(1 (8))
:row-gap 2 :column-gap '(28)
:border "#3D7068" :bgcolor "#F7FCFB"
@ -312,361 +312,361 @@
(box :content "OVERRIDDEN" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center)
(box :content "SIDES" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Item properties: :grid-column, :grid-row, :grid-column-span, :grid-row-span\nPlacement is one-based. A property accepts a start number, (start :span count), or (start end); span longhands work with automatic placement too."
:padding '(0 (18)) :border "#6A5C8B"
:bgcolor "#E7E2F1" :color "#332B4B" :wrap-mode 'word)
(grid :grid-template-columns '((206) (206) (206))
(box :layout 'grid :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between
:padding '(0 (12)) :border "#6A5C8B" :border-top-p nil
:bgcolor "#FBF9FF"
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "automatic placement\nno item coordinates" :padding '(0 (6))
:border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
:grid-template-rows '(1 1) :gap '(0 (4))
:border "#6A5C8B" :bgcolor "#FBF9FF"
(box :content "A" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center)
(box :content "B" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center)
(box :content "C" :bgcolor "#AFA3D1" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content ":grid-column 2\none column start" :padding '(0 (6))
:border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
:grid-template-rows '(1 1) :gap '(0 (4))
:border "#6A5C8B" :bgcolor "#FBF9FF"
(grid-item :grid-column 2
(box :content "C2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center))
(box :content "AUTO" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content ":grid-row 2\none row start" :padding '(0 (6))
:border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
:grid-template-rows '(1 1) :gap '(0 (4))
:border "#6A5C8B" :bgcolor "#FBF9FF"
(grid-item :grid-row 2
(box :content "R2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center))
(box :content "AUTO" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content ":grid-column (1 :span 2)\nspan in the column value" :padding '(0 (6))
:border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
:grid-template-rows '(1 1) :gap '(0 (4))
:border "#6A5C8B" :bgcolor "#FBF9FF"
(grid-item :grid-column '(1 :span 2)
(box :content "C1–C2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center))
(box :content "C3" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content ":grid-row (1 :span 2)\nspan in the row value" :padding '(0 (6))
:border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
:grid-template-rows '(1 1) :gap '(0 (4))
:border "#6A5C8B" :bgcolor "#FBF9FF"
(grid-item :grid-row '(1 :span 2)
(box :content "R1–R2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center))
(box :content "OTHER" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content ":grid-column (1 3)\nexplicit end line" :padding '(0 (6))
:border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
:grid-template-rows '(1 1) :gap '(0 (4))
:border "#6A5C8B" :bgcolor "#FBF9FF"
(grid-item :grid-column '(1 3)
(box :content "C1→C2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center))
(box :content "C3" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content ":grid-row (1 3)\nexplicit end line" :padding '(0 (6))
:border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
:grid-template-rows '(1 1 1) :gap '(0 (4))
:border "#6A5C8B" :bgcolor "#FBF9FF"
(grid-item :grid-row '(1 3)
(box :content "R1→R2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center))
(box :content "OTHER" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content ":grid-column-span 2\nlonghand span" :padding '(0 (6))
:border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
:grid-template-rows '(1 1) :gap '(0 (4))
:border "#6A5C8B" :bgcolor "#FBF9FF"
(grid-item :grid-column-span 2
(box :content "C1–C2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center))
(box :content "C3" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content ":grid-row-span 2\nlonghand span" :padding '(0 (6))
:border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
:grid-template-rows '(1 1) :gap '(0 (4))
:border "#6A5C8B" :bgcolor "#FBF9FF"
(grid-item :grid-row-span 2
(box :content "R1–R2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center))
(box :content "OTHER" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "direct child placement\n:grid-item is only a convenience" :padding '(0 (6))
:border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center)
(grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
(box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58))
:grid-template-rows '(1 1) :gap '(0 (4))
:border "#6A5C8B" :bgcolor "#FBF9FF"
(box :grid-column 2 :grid-row 2 :content "DIRECT\nC2/R2"
:bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center)
(box :content "AUTO" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :justify-items\nInline-axis item alignment supports start, center, end, stretch, and normal. Fixed-size items make the first three positions visible."
:padding '(0 (18)) :border "#B07836"
:bgcolor "#F3E4C7" :color "#513718" :wrap-mode 'word)
(grid :grid-template-columns '((206) (206) (206))
(box :layout 'grid :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between
:padding '(0 (12)) :border "#B07836" :border-top-p nil
:bgcolor "#FFF9ED"
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "start" :padding '(0 (6))
:border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((194))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((194))
:grid-template-rows '(3) :justify-items 'start :align-items 'center
:border "#B07836" :bgcolor "#FFF9ED"
(box :width '(72) :content "START" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "center" :padding '(0 (6))
:border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((194))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((194))
:grid-template-rows '(3) :justify-items 'center :align-items 'center
:border "#B07836" :bgcolor "#FFF9ED"
(box :width '(72) :content "CENTER" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "end" :padding '(0 (6))
:border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((194))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((194))
:grid-template-rows '(3) :justify-items 'end :align-items 'center
:border "#B07836" :bgcolor "#FFF9ED"
(box :width '(72) :content "END" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "stretch" :padding '(0 (6))
:border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((194))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((194))
:grid-template-rows '(3) :justify-items 'stretch :align-items 'center
:border "#B07836" :bgcolor "#FFF9ED"
(box :content "AUTO WIDTH\nSTRETCH" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "normal" :padding '(0 (6))
:border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((194))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((194))
:grid-template-rows '(3) :justify-items 'normal :align-items 'center
:border "#B07836" :bgcolor "#FFF9ED"
(box :content "AUTO WIDTH\nNORMAL" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :align-items\nBlock-axis item alignment supports start, center, end, stretch, and normal. The fixed row height exposes the vertical offset."
:padding '(0 (18)) :border "#B07836"
:bgcolor "#F3E4C7" :color "#513718" :wrap-mode 'word)
(grid :grid-template-columns '((206) (206) (206))
(box :layout 'grid :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between
:padding '(0 (12)) :border "#B07836" :border-top-p nil
:bgcolor "#FFF9ED"
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "start" :padding '(0 (6))
:border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((194))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((194))
:grid-template-rows '(5) :justify-items 'center :align-items 'start
:border "#B07836" :bgcolor "#FFF9ED"
(box :width '(82) :height 1 :content "START" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "center" :padding '(0 (6))
:border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((194))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((194))
:grid-template-rows '(5) :justify-items 'center :align-items 'center
:border "#B07836" :bgcolor "#FFF9ED"
(box :width '(82) :height 1 :content "CENTER" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "end" :padding '(0 (6))
:border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((194))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((194))
:grid-template-rows '(5) :justify-items 'center :align-items 'end
:border "#B07836" :bgcolor "#FFF9ED"
(box :width '(82) :height 1 :content "END" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "stretch" :padding '(0 (6))
:border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((194))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((194))
:grid-template-rows '(5) :justify-items 'center :align-items 'stretch
:border "#B07836" :bgcolor "#FFF9ED"
(box :content "AUTO HEIGHT\nSTRETCH" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "normal" :padding '(0 (6))
:border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center)
(grid :width '(206) :height 5 :grid-template-columns '((194))
(box :layout 'grid :width '(206) :height 5 :grid-template-columns '((194))
:grid-template-rows '(5) :justify-items 'center :align-items 'normal
:border "#B07836" :bgcolor "#FFF9ED"
(box :content "NORMAL" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :justify-content\nInline-axis track packing supports start, center, end, space-between, space-around, space-evenly, stretch, and normal."
:padding '(0 (18)) :border "#2F7180"
:bgcolor "#CFE8EA" :color "#1E4148" :wrap-mode 'word)
(grid :grid-template-columns '((206) (206) (206))
(box :layout 'grid :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between
:padding '(0 (12)) :border "#2F7180" :border-top-p nil
:bgcolor "#F6FCFC"
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "start" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60))
:grid-template-rows '(2) :gap '(0 (6)) :justify-content 'start
:justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "center" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60))
:grid-template-rows '(2) :gap '(0 (6)) :justify-content 'center
:justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "end" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60))
:grid-template-rows '(2) :gap '(0 (6)) :justify-content 'end
:justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "space-between" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60))
:grid-template-rows '(2) :gap '(0 (6)) :justify-content 'space-between
:justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "space-around" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60))
:grid-template-rows '(2) :gap '(0 (6)) :justify-content 'space-around
:justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "space-evenly" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60))
:grid-template-rows '(2) :gap '(0 (6)) :justify-content 'space-evenly
:justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "stretch" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60))
:grid-template-rows '(2) :gap '(0 (6)) :justify-content 'stretch
:justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "normal" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 3 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60))
:grid-template-rows '(2) :gap '(0 (6)) :justify-content 'normal
:justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "Container property: :align-content\nBlock-axis track packing mirrors justify-content: start, center, end, space-between, space-around, space-evenly, stretch, and normal."
:padding '(0 (18)) :border "#2F7180"
:bgcolor "#CFE8EA" :color "#1E4148" :wrap-mode 'word)
(grid :grid-template-columns '((206) (206) (206))
(box :layout 'grid :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between
:padding '(0 (12)) :border "#2F7180" :border-top-p nil
:bgcolor "#F6FCFC"
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "start" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 7 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60))
:grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'start
:justify-content 'center :justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)
(box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "center" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 7 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60))
:grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'center
:justify-content 'center :justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)
(box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "end" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 7 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60))
:grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'end
:justify-content 'center :justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)
(box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "space-between" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 7 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60))
:grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'space-between
:justify-content 'center :justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)
(box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "space-around" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 7 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60))
:grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'space-around
:justify-content 'center :justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)
(box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "space-evenly" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 7 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60))
:grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'space-evenly
:justify-content 'center :justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)
(box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "stretch" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 7 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60))
:grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'stretch
:justify-content 'center :justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
(box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center)
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)
(box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center)))
(column :width '(206)
(box :layout 'column :width '(206)
(box :content "normal" :padding '(0 (6))
:border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center)
(grid :width '(206) :height 7 :grid-template-columns '((60) (60))
(box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60))
:grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'normal
:justify-content 'center :justify-items 'center :align-items 'center
:border "#2F7180" :bgcolor "#F6FCFC"
@ -674,7 +674,7 @@
(box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)
(box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center))))
(spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :content "GRID TOOLKIT\n:grid-template-columns · :grid-template-rows · :grid-auto-columns · :grid-auto-rows · :grid-auto-flow · :gap · :row-gap · :column-gap · :grid-row-gap · :grid-column-gap · :justify-items · :align-items · :justify-content · :align-content · :grid-column · :grid-row · :grid-column-span · :grid-row-span\nTrack forms: fixed · auto · (fr FACTOR) · NFR · minmax · repeat. Placement forms: start · (start :span count) · (start end)."
:padding '(1 (16)) :border "#2E3740"

16
examples/public-layout-gallery.ebox
View File

@ -1,4 +1,4 @@
(column
(box :layout 'column
(box :content "Ebox Playground\nPixel-precise layout, composed only from public nodes."
:width '(720)
:padding '(1 (18))
@ -7,7 +7,7 @@
:bgcolor "#FFFDF8"
:face 'bold
:text-align 'center)
(spacer :width '(720) :height 1 :bgcolor "#FAF7F0")
(box :width '(720) :height 1 :bgcolor "#FAF7F0")
(box :content "01 FIXED + FRACTIONAL\nA definite Grid width divides into one exact track and one flexible track."
:width '(720)
:padding '(0 (16))
@ -16,7 +16,7 @@
:color "#252A2E"
:bgcolor "#F1D4C9"
:wrap-mode 'word)
(grid
(box :layout 'grid
:width '(720)
:grid-template-columns '((220) 1fr)
:gap '(1 (12))
@ -32,7 +32,7 @@
:grid-column '(1 :span 2) :width '(718) :padding '(1 0)
:color "#663322" :bgcolor "#FFFDF8"
:text-align 'center :wrap-mode 'word))
(spacer :width '(720) :height 1 :bgcolor "#FAF7F0")
(box :width '(720) :height 1 :bgcolor "#FAF7F0")
(box :content "02 EXPLICIT PLACEMENT\nSpan columns, target cells, and leave the remaining nodes to auto placement."
:width '(720)
:padding '(0 (16))
@ -41,7 +41,7 @@
:color "#252A2E"
:bgcolor "#DCEBDD"
:wrap-mode 'word)
(grid
(box :layout 'grid
:width '(720)
:grid-template-columns '((210) (210) 1fr)
:gap '(1 (10))
@ -60,7 +60,7 @@
:text-align 'center :color "#24422D" :bgcolor "#E3F0E5")
(box :content "STABLE CELLS" :width '(278) :padding '(1 0)
:text-align 'center :color "#24422D" :bgcolor "#D4E6D7"))
(spacer :width '(720) :height 1 :bgcolor "#FAF7F0")
(box :width '(720) :height 1 :bgcolor "#FAF7F0")
(box :content "03 PUBLIC COMPOSITION\nColumn, Flex, and Grid share the same public node contract."
:width '(720)
:padding '(0 (16))
@ -69,7 +69,7 @@
:color "#252A2E"
:bgcolor "#D9EAF2"
:wrap-mode 'word)
(flex
(box :layout 'flex
:width '(720)
:flex-flow '(row wrap)
:gap '(1 (12))
@ -88,7 +88,7 @@
:flex-grow 1 :flex-shrink 1 :flex-basis '(200)
:min-width '(180) :padding '(1 (12))
:color "#6B3020" :bgcolor "#F1D4C9"))
(spacer :width '(720) :height 1 :bgcolor "#FAF7F0")
(box :width '(720) :height 1 :bgcolor "#FAF7F0")
(box :content "PUBLIC CONTRACT ebox-create · ebox-column · ebox-flex · ebox-grid · ebox-spacer"
:width '(720)
:padding '(0 (16))

14
examples/responsive-reference.ebox
View File

@ -1,19 +1,19 @@
(column
(box :layout 'column
:margin-left 1 :margin-top 1 :padding '(1 2 1 2) :bgcolor "linen"
(box :content "Ebox Responsive Layout\nDrag the preview window: sections stretch to the current viewport, cards reflow, and text wraps without changing the window layout."
:padding '(1 (18)) :border "#334155" :text-align 'center
:color "#000" :bgcolor "ghost white")
(spacer :height 1)
(box :height 1)
(box :content "No explicit viewport width here\nThis page mostly omits :width. The Playground binds the current preview width while rendering, so auto width behaves like a responsive container."
:padding '(0 (16)) :border "#0F766E"
:bgcolor "#F0FDFA" :color "#134E4A" :wrap-mode 'word)
(spacer :height 1)
(box :height 1)
(box :content "Adaptive toolbar\nButtons below keep stable sizes. The row packs as many as fit and then wraps."
:padding '(0 (16)) :border "#EA580C" :border-bottom-p nil
:bgcolor "#FFF7ED" :color "#431407" :wrap-mode 'word)
(flex :flex-flow '(row wrap) :column-gap '(8) :row-gap 1
(box :layout 'flex :flex-flow '(row wrap) :column-gap '(8) :row-gap 1
:padding '(1 (8)) :border "#FDBA74" :bgcolor "#FFFBF5"
(box :content "Render" :width '(96) :padding '(0 (8))
:border "#EA580C" :bgcolor "#FED7AA" :color "#111827"
@ -30,12 +30,12 @@
(box :content "Write" :width '(88) :padding '(0 (8))
:border "#9333EA" :bgcolor "#F3E8FF" :color "#3B0764"
:text-align 'center))
(spacer :height 1)
(box :height 1)
(box :content "Responsive cards\nEach card starts from a flex-basis, grows when space is available, and wraps to new rows when the preview becomes narrow."
:padding '(0 (16)) :border "#2563EB" :border-bottom-p nil
:bgcolor "#EFF6FF" :color "#1E3A8A" :wrap-mode 'word)
(flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1
(box :layout 'flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1
:padding '(1 (8)) :border "#93C5FD" :bgcolor "#F8FBFF"
:justify-content 'center
(item :flex '(1 1 (210))
@ -58,7 +58,7 @@
:min-width '(180) :max-width '(280)
:padding '(0 (10)) ;; :border "#0891B2"
:bgcolor "#CFFAFE" :color "#164E63" :wrap-mode 'word)))
(spacer :height 1)
(box :height 1)
(box :content "What to watch\nNarrow preview: cards stack and text wraps. Wide preview: cards share a row and expand up to max-width. The source/preview split is preserved."
:padding '(0 (16)) :border "#475569"

21
tests/ebox-playground-tests.el
View File

@ -463,17 +463,20 @@
(should (cl-every (lambda (width) (<= width viewport))
(ebox-playground-test--line-widths text)))))
(ert-deftest ebox-playground-grid-reference-spacers-paint-the-viewport ()
"Grid reference separators should fill the active viewport canvas."
(ert-deftest ebox-playground-grid-reference-separators-paint-the-viewport ()
"Grid reference separator Boxes should fill the active viewport canvas."
(let ((path (expand-file-name "examples/grid-reference.ebox"
ebox-playground-directory)))
(let ((spacers (ebox-playground-test--forms-named
'spacer (ebox-playground--read-file path))))
(should (= (length spacers) 11))
(dolist (spacer spacers)
(should (equal (plist-get (cdr spacer) :width)
'(quote (viewport))))
(should (equal (plist-get (cdr spacer) :bgcolor) "#FAF7F0"))))
(let ((separators
(cl-remove-if-not
(lambda (form)
(and (equal (plist-get (cdr form) :width)
'(quote (viewport)))
(equal (plist-get (cdr form) :height) 1)
(equal (plist-get (cdr form) :bgcolor) "#FAF7F0")))
(ebox-playground-test--forms-named
'box (ebox-playground--read-file path)))))
(should (= (length separators) 11)))
(dolist (viewport '(691 720))
(let* ((ebox-viewport-width viewport)
(lines (ebox-string-lines