Skip to content

feat: grow makes a nested card fill its share of the free space #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eigger merged 3 commits into from
Oct 3, 2026
Merged

feat: grow makes a nested card fill its share of the free space #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b760def
feat: grow makes a nested card fill its share of the free space
eigger Oct 3, 2026
b72a77c
fix: growing cards ignore rotation, own coordinates and invisible boxes
eigger Oct 3, 2026
ae16db1
test: growing card ignores its own main coordinate in a column
eigger Oct 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/authoring.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ Container:

Per child (set on the child dict, under a `layout:` sub-dict to avoid clashing
with the element's own keys):
- `layout: { grow: 1 }` — take a share of leftover main-axis space (push siblings apart)
- `layout: { grow: 1 }` — take a share of leftover main-axis space (push siblings apart); a card (a nested stack with `background`/`outline` and no `width`/`height` on the main axis) grows its box to fill its share
- `layout: { align: center }` — override the container's cross-axis alignment for this child
- `layout: { margin: 4 }` or `margin_x` / `margin_top` / ... — extra space around this child (may be negative to nudge)

Expand Down
2 changes: 1 addition & 1 deletion docs/reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ See [`elements.md`](elements.md) for a rendered YAML example of every element an
| `dither` | bool \| 0/1 \| method name | | Per-element palette mapping: `true`/`false` (also `1`/`0` or a template string such as `"False"`) or a dither method name; overrides the render-wide setting for this element only. `null` = no override |
| `class` | string | | Tailwind-like layout classes (`gap-2 items-center grow -ml-1 ...`), read by an enclosing stack/row/column |
| `layout` | object | | Explicit per-child layout hints for an enclosing stack (same keys as the `class` shorthand) |
| `layout.grow` | number | `0` | Share of leftover main-axis space this child takes (flex-grow) |
| `layout.grow` | number | `0` | Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it |
| `layout.align` | `start` \| `end` \| `center` \| `stretch` | | Cross-axis alignment for this child only |
| `layout.self` | `start` \| `end` \| `center` \| `stretch` | | Alias of `align` |
| `layout.margin` | number | | All four margins (px) |
Expand Down
72 changes: 36 additions & 36 deletions schema/elements.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -522,7 +522,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -730,7 +730,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -982,7 +982,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -1232,7 +1232,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -1468,7 +1468,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -1703,7 +1703,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -1951,7 +1951,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -2388,7 +2388,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -2618,7 +2618,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -2880,7 +2880,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -3085,7 +3085,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -3288,7 +3288,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -3495,7 +3495,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -3855,7 +3855,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -4211,7 +4211,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -4423,7 +4423,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -4651,7 +4651,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -4865,7 +4865,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -5077,7 +5077,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -5310,7 +5310,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -5503,7 +5503,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -5700,7 +5700,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -5913,7 +5913,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -6099,7 +6099,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -6351,7 +6351,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -6630,7 +6630,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -6856,7 +6856,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -7088,7 +7088,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -7452,7 +7452,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -7728,7 +7728,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -7980,7 +7980,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -8281,7 +8281,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -8580,7 +8580,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -8855,7 +8855,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -9069,7 +9069,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down Expand Up @@ -9349,7 +9349,7 @@
"number",
"null"
],
"description": "Share of leftover main-axis space this child takes (flex-grow)",
"description": "Share of leftover main-axis space this child takes (flex-grow); a card (a nested stack with `background`/`outline` and no main-axis size) grows its box to fill it",
"default": 0
},
"align": {
Expand Down
Loading
Loading