Grid Layout Block – widgets in a grid of cells¶
The grid layout places its widgets in a grid of columns and rows. A widget can span several columns or rows. Columns can be set per breakpoint or created automatically from a minimum width.
This page is part of the widget reference.
1. At a glance¶
| Purpose | Arranges widgets in cells, with column and row spans |
| Typical use | A tile layout: one large chart over two columns and two rows, small cards around it; as many tiles as fit the width |
| Related | Horizontal Stack, Vertical Stack |
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 (sm, md, lg, xl, 2xl): a number of equal columns or the column widths (7fr 3fr). Can be computed. |
none |
| "Auto-Fit Column Width" | A minimum column width, for example 220px. The grid then creates as many columns as fit, and "Columns" is ignored. |
none |
| "Gap" | Space between the cells as a CSS length. A plain number means pixels. | none |
| "Row Gap" | A separate space between the rows | the value of "Gap" |
| "Align Items" | Vertical alignment of the widgets in their cells: Start, Center, End, Stretch | Default |
| "Is Container", "Container Id", "Target Container Id" | Container settings, as for the Horizontal Stack | off, none, nearest container |
The widgets inside use their own settings "Column Span" and "Row Span" (category "Layout") to cover several cells. Empty means 1.
3. Behaviour¶
- The widgets fill the cells in the order of the block tree, row by row.
- With "Auto-Fit Column Width", the number of columns follows the available width – no breakpoints are needed.
- The grid layout does not refresh itself. Switch on "Auto Refresh" on the widgets inside it.
4. Example¶
Tiles that fit the screen. "Auto-Fit Column Width" = 240px, "Gap" = 16. Inside: six cards
and one chart with "Column Span" = 2. On a wide screen the cards sit four or five in a row; on a
phone one below the other.