Horizontal Stack Block – blocks side by side¶
The horizontal stack places its child blocks in a row. Without columns the row wraps on narrow screens; with columns per breakpoint it becomes a grid that turns into fewer columns on a narrow screen. It is the container for putting two or three inputs beside each other.
This page is part of the form block reference.
1. At a glance¶
| Purpose | Arranges child blocks in a row or in columns |
| Typical use | A row of two or three inputs; a main column beside a narrow side column |
| Related | Vertical Stack Block, Grid Layout Block, Scroll Strip Block |
2. Settings¶
All settings below are in the category "Layout". In addition, the block has the settings every block has.
| Setting | Meaning | Default |
|---|---|---|
| "Columns" | Columns per breakpoint: a value for every width and optional values for sm, md, lg, xl and 2xl upwards. Each value is a number of equal columns (3) or the column widths (7fr 3fr, 200px 1fr). Can be computed. |
none – a wrapping row |
| "Gap" | Space between the children as a CSS length. A plain number means pixels. | none |
| "Align Items" | Vertical alignment of the children: Start, Center, End, Stretch | Default |
| "Justify Content" | Distribution of the children along the row: Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly | Default |
| "Is Container" | Makes the stack the reference for the breakpoints of the blocks inside it | off |
| "Container Id" | Name under which blocks further down can refer to this container | none |
| "Target Container Id" | "Container Id" of the container whose width the breakpoints of this stack refer to | the nearest container, usually the form |
| "Expandable" | Draws the row only up to the folded width and offers a handle beside it to unfold it | off |
| "Folded Width" | Width while folded, as a CSS length. Only with "Expandable". | 320px |
| "Expanded" | Condition under which the row opens unfolded. Only with "Expandable". | opens folded |
| "Unfold Text", "Fold Text" | Texts of the handle; they are shown as its tooltip. Only with "Expandable". | "Show more", "Show less" |
A child block can span several columns with its own setting "Column Span".
3. Behaviour¶
- Without columns the children keep their natural width and wrap onto the next line when the row is too narrow.
- With columns the children are placed in a grid. A breakpoint without a value takes the value of the next smaller one. The breakpoints refer to the width of the surrounding container, not of the browser window (see Layout).
- Folding: folded, the children keep their natural widths and what does not fit is cut off. A row with columns per breakpoint shares the folded width out instead, so it only hides something once even its natural column widths no longer fit. The handle only appears when something is really hidden. Folding therefore suits a row of items, not a proportional two-column layout.
4. Examples¶
Three inputs in a row, stacked on a phone. "Columns" = 1, "Columns (md)" = 3,
"Gap" = 12px. On a narrow form the three inputs are stacked; from the md breakpoint upwards they
share the row.
Main and side column. "Columns" = 1, "Columns (lg)" = 7fr 3fr. The details of a
ticket take 70 %, a side column with avatar and badges takes 30 %. Use fractions, not percentages:
70% 30% plus the gap is wider than the row.
5. Limitations¶
- A row of fields that scrolls sideways hides half the form; for a row whose length comes from the data, use the Scroll Strip Block instead.
- Fixed pixel widths on the children only suit one screen size. Prefer columns per breakpoint.