Layout Blocks Demo

Group, Columns, Row, Stack, and Grid are all siblings. Group is the base; the others are layout variations of it. Below, each section uses identical children (six bordered boxes) so you can see how the layout alone changes the result. These are structural layout blocks. For specific block examples, see the Styleguide

---

1. Group — plain wrapper (Default flow)

Layout: Default. Children flow normally (block after block, each full-width). Use it to wrap content with a background, padding, or max width — not to lay things out side-by-side.

---

2. Columns — equal percentage widths

Layout: Each column gets a percentage width (sums to 100%). Stacks on mobile automatically. Use when you want predictable, proportional columns.

---

3. Row — horizontal flex

Layout: Flex, horizontal. Items sit at their natural width (not percentages) and wrap to a new line when they don’t fit. Great for tags, buttons, or pill-shaped chips. Unlike Columns, children don’t stretch to equal widths by default.

---

4. Stack — vertical flex

Layout: Flex, vertical. Children stack top-to-bottom, full width by default, with consistent gap between them. Main reason to use this over plain Group: you control the vertical gap in one place instead of adding margin to each child.

---

5. Grid — Auto mode

Layout: CSS Grid with a minimum column width (set here to 12rem). Browser fits as many columns as will comfortably fit, and rewraps automatically as the screen narrows. Perfect for card grids — no media queries needed.

---

6. Grid — Manual mode (fixed columns + spans)

Layout: CSS Grid with a fixed column count (4 here). Each child can then span multiple columns or rows via its own sidebar controls. Use for asymmetric, dashboard-style layouts. The first box below spans 2 columns; the last spans 2 columns.