Grid
Layout
Takes a block
CSS grid with a fixed number of columns.
Grid(columns: …, gap: …, align: …) { … }
Example
Grid(columns: { base: 1, md: 3 }, gap: .lg) {
Card { Text("One") }
Card { Text("Two") }
Card { Text("Three") }
}
Renders with the class wf-grid, stable across releases, so a stylesheet may target it.
| Prop | Type | Meaning |
|---|---|---|
| columns: | Number |
Number of equal columns |
| gap: | .xs .sm .md .lg .xl |
Space between children |
| align: | .start .center .end .stretch .baseline |
Cross-axis alignment |
| justify: | .start .center .end .between .around .evenly |
Main-axis distribution |
| stacks: | Bool |
Reflow on a narrow screen: a Row becomes a column, a Grid one column |
Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.