Skip to content

Grid Layout Block – blocks in columns and rows

The grid layout places its child blocks in a grid. Children fill the cells in reading order and can span several columns and rows. Use it where blocks have to line up in columns across several rows.

This page is part of the form block reference.

1. At a glance
Purpose Arranges child blocks in a grid of columns and rows
Typical use A block of fields that line up in columns; tiles of equal width that fill the available width
Related Horizontal Stack Block, Vertical Stack 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, exactly as on the Horizontal Stack Block: a number of equal columns or the column widths, for every width and optionally from sm, md, lg, xl, 2xl upwards. Can be computed. none
"Auto-Fit Column Width" Minimum width of a column as a CSS length (200px). When set, as many columns as fit are created automatically, and "Columns" is ignored. none
"Gap" Space between the cells as a CSS length. A plain number means pixels. none
"Row Gap" Separate space between the rows same as "Gap"
"Align Items" Vertical alignment of the children in their cells: Start, Center, End, Stretch Default
"Is Container" Makes the grid 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 grid refer to the nearest container, usually the form

On every child block, "Column Span" and "Row Span" decide how many cells it occupies.

3. Behaviour

  • The children are placed cell by cell in the order of the tree.
  • With "Auto-Fit Column Width" the number of columns follows the available width: a 900px wide grid with 200px gets four columns, which share the remaining width.
  • Unlike the stacks, the grid layout has no "Justify Content" and cannot be folded.

4. Examples

Contact data in two columns. "Columns" = 1, "Columns (md)" = 2, "Gap" = 12px. Six inputs fill three rows of two from the md breakpoint upwards. The input "Notes" gets "Column Span" = 2 and takes a whole row.

Tiles. A grid with "Auto-Fit Column Width" = 220px holds six element blocks styled as cards (key figures of a customer). The number of cards per row follows the width of the form.

A Repeater Block inside a grid is one cell – the repetitions are laid out by the repeater, not by the grid.