# Layout
The parent sets the grid, the number is the count, and a width prefix measures the region the element is in. Stacks for a column or a row of items, gaps between them, no margins on components.
## Grids
`grid` on the parent, `cols-N` for N equal columns, `gap-*` between them. A width prefix adds columns as the region grows: `grid md:cols-2` is one column until the region is 768 px wide. Every example on these pages is a region of its own - resize the window and watch the examples, not the window.
```html
One
Two
Three
Four
```
### Spans on a 12-column grid
A child's exception: `span-N` or `span-full`, with a prefix where it changes.
```html
The main column - md:span-8
The side - md:span-4
```
### As many as fit
`cols-min-240`: as many columns as fit, none narrower than 240 px.
```html
lagoon.example
villas.lagoon.example
northbay.example
```
## Stacks
`vstack` is a column of items, `hstack` a row of them centered on one line; `gap-*` spaces them and `ms-auto` pushes the rest to the end.
```html
DraftEdited 2 hours ago
```
## Regions and breakpoints
Regions are the shell's main and side columns, cards, dialogs, drawers, and any block with the class `region`. A page without the shell marks its own `region`; the root is never one.
| Prefix | The region is at least |
| --- | --- |
| `sm:` | 576 px |
| `md:` | 768 px |
| `lg:` | 1024 px |
| `xl:` | 1280 px |
| `2xl:` | 1536 px |
| `print:` | on paper |
- A region inside a flex row needs a width - `flex-grow-1` or a grid track: its size cannot come from its content.
- A card in the 8-of-12 column at 1440 px is about 740 px wide: `sm:` inside it, not `md:`.
## From Bootstrap 5.3
| Bootstrap 5.3 | REDZ.UI | Change | Note |
| --- | --- | --- | --- |
| `col` | - | grid | equal columns come from the parent's cols-N; the child needs no class |
| `col-1` | `span-1` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-10` | `span-10` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-11` | `span-11` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-12` | `span-12` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-2` | `span-2` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-3` | `span-3` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-4` | `span-4` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-5` | `span-5` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-6` | `span-6` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-7` | `span-7` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-8` | `span-8` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-9` | `span-9` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-auto` | - | review | a column as wide as its content: hstack, or grid-template-columns in the module's CSS |
| `container` | - | review | the shell's app-main, or a region with max-w-* and mx-auto |
| `container-fluid` | - | review | the shell's app-main, or a region with max-w-* and mx-auto |
| `g-0` | `gap-0` | grid | on the grid parent |
| `g-1` | `gap-4` | grid | on the grid parent |
| `g-2` | `gap-8` | grid | on the grid parent |
| `g-3` | `gap-16` | grid | on the grid parent |
| `g-4` | `gap-24` | grid | on the grid parent |
| `g-5` | `gap-48` | grid | on the grid parent |
| `gx-0` | `column-gap-0` | grid | on the grid parent |
| `gx-1` | `column-gap-4` | grid | on the grid parent |
| `gx-2` | `column-gap-8` | grid | on the grid parent |
| `gx-3` | `column-gap-16` | grid | on the grid parent |
| `gx-4` | `column-gap-24` | grid | on the grid parent |
| `gx-5` | `column-gap-48` | grid | on the grid parent |
| `gy-0` | `row-gap-0` | grid | on the grid parent |
| `gy-1` | `row-gap-4` | grid | on the grid parent |
| `gy-2` | `row-gap-8` | grid | on the grid parent |
| `gy-3` | `row-gap-16` | grid | on the grid parent |
| `gy-4` | `row-gap-24` | grid | on the grid parent |
| `gy-5` | `row-gap-48` | grid | on the grid parent |
| `offset-1` | - | review | no offsets: a span with an empty track before it |
| `offset-10` | - | review | no offsets: a span with an empty track before it |
| `offset-11` | - | review | no offsets: a span with an empty track before it |
| `offset-2` | - | review | no offsets: a span with an empty track before it |
| `offset-3` | - | review | no offsets: a span with an empty track before it |
| `offset-4` | - | review | no offsets: a span with an empty track before it |
| `offset-5` | - | review | no offsets: a span with an empty track before it |
| `offset-6` | - | review | no offsets: a span with an empty track before it |
| `offset-7` | - | review | no offsets: a span with an empty track before it |
| `offset-8` | - | review | no offsets: a span with an empty track before it |
| `offset-9` | - | review | no offsets: a span with an empty track before it |
| `row` | `grid` | grid | on the parent, with cols-N for equal columns or cols-12 for spans; no gutters to undo |
| `row-cols-1` | `cols-1` | grid | on the same parent |
| `row-cols-2` | `cols-2` | grid | on the same parent |
| `row-cols-3` | `cols-3` | grid | on the same parent |
| `row-cols-4` | `cols-4` | grid | on the same parent |
| `row-cols-5` | `cols-5` | grid | on the same parent |
| `row-cols-6` | `cols-6` | grid | on the same parent |
| `row-cols-auto` | - | review | items as wide as their content: hstack flex-wrap |
| `--bs-breakpoint-xs` | - | remove | REDZ.UI's widths are the region prefixes sm: to 2xl: |
| `--bs-gutter-x` | - | review | the grid's gap: gap-* on the grid |
| `--bs-gutter-y` | - | review | the grid's gap: gap-* on the grid |