# Layout primitives - SvStack, SvGroup, SvSimpleGrid
Three tiny flex/grid wrappers that cover the layouts you reach for constantly, so
you stop hand-writing `display: flex; gap: …` on every wrapper `div`. They carry
no visual styling - just structure - and take a numeric `gap` (pixels) or any CSS
length.
- **SvStack** - a vertical column.
- **SvGroup** - a horizontal row (with optional wrap and equal-grow).
- **SvSimpleGrid** - a responsive grid: fixed `cols`, or auto-fit by
`minChildWidth`.
Related: [SvCard](https://svgrid.com/docs/help/ui-components/sv-card/) · [SvSplitter](https://svgrid.com/docs/help/ui-components/sv-splitter/) · [SvDockLayout](https://svgrid.com/docs/help/ui-components/sv-dock-layout/)
## Installation
Add them with the CLI:
Or install the package and import them directly. They ship free in
`@svgrid/grid` (dependency-free):
The examples on this page import from `@svgrid/grid`:
```svelte
```
```ts
import { SvStack, SvGroup, SvSimpleGrid } from '@svgrid/grid'
```
## Example
> Live demo: Layout & feedback primitives - https://svgrid.com/demos/409-layout-feedback/
```svelte
Team
```
## SvStack
A vertical flex column.
| Prop | Type | Default | Description |
| --------- | ------------------------------------------------- | --------- | ---------------------------------------- |
| `gap` | `number \| string` | `12` | Space between children (number = px). |
| `align` | `start` \| `center` \| `end` \| `stretch` | `stretch` | Cross-axis alignment (`align-items`). |
| `justify` | `start` \| `center` \| `end` \| `between` \| `around` | `start` | Main-axis distribution (`justify-content`). |
| `as` | `string` | `div` | Element/tag to render. |
## SvGroup
A horizontal flex row.
| Prop | Type | Default | Description |
| --------- | ---------------------------------------------------------- | -------- | -------------------------------------------- |
| `gap` | `number \| string` | `8` | Space between children (number = px). |
| `align` | `start` \| `center` \| `end` \| `stretch` \| `baseline` | `center` | Cross-axis alignment. |
| `justify` | `start` \| `center` \| `end` \| `between` \| `around` | `start` | Main-axis distribution. |
| `wrap` | `boolean` | `false` | Allow children to wrap onto new lines. |
| `grow` | `boolean` | `false` | Give every child `flex: 1` (equal widths). |
| `as` | `string` | `div` | Element/tag to render. |
## SvSimpleGrid
A responsive CSS grid. Set `cols` for a fixed column count, or leave it unset to
auto-fit as many `minChildWidth`-wide columns as fit.
| Prop | Type | Default | Description |
| --------------- | ------------------ | ------- | --------------------------------------------------------------------- |
| `cols` | `number` | - | Fixed number of equal columns. Overrides `minChildWidth`. |
| `minChildWidth` | `number` | `200` | Auto-fit: minimum child width (px) before wrapping to a new column. |
| `gap` | `number \| string` | `12` | Grid gap (number = px). |
## Accessibility
These are presentational containers - they add no roles and do not affect focus
order (children keep their natural DOM order). Choose a semantic `as` (e.g.
`as="ul"` / `as="section"`) when the grouping is meaningful.
## See also
- [SvCard](https://svgrid.com/docs/help/ui-components/sv-card/) - the boxed surface these primitives usually arrange.
- [SvSplitter](https://svgrid.com/docs/help/ui-components/sv-splitter/) / [SvDockLayout](https://svgrid.com/docs/help/ui-components/sv-dock-layout/) - for resizable, user-driven layouts.
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-components/sv-layout-primitives/ . All docs: https://svgrid.com/llms.txt