Skip to content

Horizontal Stack Block – widgets side by side

The horizontal stack places its widgets 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 usual container for a row of key figures or two charts beside each other.

This page is part of the widget reference.

1. At a glance
Purpose Arranges widgets in a row or in columns
Typical use Four cards in a row; a chart beside a grid; a main column beside a narrow side column
Related Vertical Stack, Grid Layout, Scroll Strip

2. Settings

All settings below are in the category "Layout". In addition, the widget has the settings every widget has, except "Auto Refresh".

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 (4) or the column widths (7fr 3fr, 200px 1fr). Can be computed. none – a wrapping row
"Gap" Space between the widgets as a CSS length. A plain number means pixels. none
"Align Items" Vertical alignment of the widgets: Start, Center, End, Stretch Default
"Justify Content" Distribution of the widgets along the row: Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly Default
"Is Container" Makes the stack the reference for the breakpoints of the widgets inside it off
"Container Id" Name under which widgets 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
"Expandable" Draws the row only up to the folded width and offers a button 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 button. Only with "Expandable". "Show more", "Show less"

A widget inside can span several columns with its own setting "Column Span".

3. Behaviour

  • Without columns the widgets keep their natural width and wrap onto the next line when the row is too narrow.
  • With columns the widgets 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.
  • Prefer fractions (7fr 3fr) over percentages: percentages plus the gap overflow the row.
  • The stack does not refresh itself. Switch on "Auto Refresh" on the widgets inside it.

4. Examples

Four key figures, two per row on a phone. "Columns" = 2, "Columns (lg)" = 4, "Gap" = 16, with four card widgets inside.

Chart and grid. "Columns" = 1, "Columns (lg)" = 5fr 7fr, with a chart on the left and a query result grid on the right.