Grid

About 4 min read

TwGrid · Category: Containers · Container (other widgets can be placed inside it)

Settings

These settings are in the properties panel on the right while the widget is selected. The default value is the value the widget has when it is first added to a page.

Layout

Setting	Type	Default	Description
Layout Preset layoutPreset	Grid preset	—	Visual column layout. Column presets stack to one column on small screens. When a preset is selected, Column Count and Columns (Mobile/Tablet/Desktop) are ignored; choose Custom to use Column Count again.
Columns (Mobile) columnsMobile	Number	—	Column count per screen size (1-12). Mobile applies to all screens, Tablet to medium and wider, Desktop to large screens; an empty value falls back to the next smaller size. If any is set, Column Count is ignored; these values are ignored while a Layout Preset is selected.
Columns (Desktop) columnsDesktop	Number	—	Column count per screen size (1-12). Mobile applies to all screens, Tablet to medium and wider, Desktop to large screens; an empty value falls back to the next smaller size. If any is set, Column Count is ignored; these values are ignored while a Layout Preset is selected.
Row Gap (px) rowGapPx	Number	—	Spacing between rows or columns only, in pixels. Overrides Gap (px) and Gap in that direction.
Vertical Alignment alignItems	Selection	—	Vertical alignment of items inside their cells. Default stretches items to the cell height. Options: "" Default, start Start, center Center, end End, stretch Stretch
Min Item Width (px) minItemWidth	Number	240	Minimum width of each item for the Auto fit preset. Items wrap to new rows when they no longer fit.
Columns (Tablet) columnsTablet	Number	—	Column count per screen size (1-12). Mobile applies to all screens, Tablet to medium and wider, Desktop to large screens; an empty value falls back to the next smaller size. If any is set, Column Count is ignored; these values are ignored while a Layout Preset is selected.
Gap (px) gapPx	Number	—	Spacing between items in pixels. When set it replaces the Gap scale value. Leave empty to use Gap.
Column Gap (px) columnGapPx	Number	—	Spacing between rows or columns only, in pixels. Overrides Gap (px) and Gap in that direction.
Horizontal Alignment justifyItems	Selection	—	Horizontal alignment of items inside their cells. Default stretches items to the cell width. Options: "" Default, start Start, center Center, end End, stretch Stretch

Other settings

Setting	Type	Default	Description
Column Count columnCount	Number	12	Number of equal columns. Ignored when a Layout Preset is selected or any Columns (Mobile/Tablet/Desktop) value is set.
Column Size columnSize	Number	—	When this grid is inside another grid, the number of columns it spans there (1–12). Empty spans one column.
Column Start columnStart	Number	—	Column of the parent grid where this grid starts. Empty places it automatically.
Row Count rowCount	Number	—	Number of equal-height rows (1–12). Empty or 0 creates rows automatically as needed.
Row Size rowSize	Number	—	When this grid is inside another grid, the number of rows it spans there (1–12). Empty spans one row.
Row Start rowStart	Number	—	Row of the parent grid where this grid starts. Empty places it automatically.
Flow flow	Selection	—	Order in which items fill the grid: Row fills the rows first, Column fills the columns first. Default keeps the standard order (rows). Options: "" Default, row Row, col Column
Subgrid subgrid	Selection	—	Row or Column makes this grid reuse the rows or columns of its parent grid (CSS subgrid). Default uses its own rows and columns. Options: "" Default, row Row, col Column
Gap gap	Number	—	Spacing scale between items (1-12). Ignored when Gap (px) is set.
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, subgrid, flow, layoutPreset, minItemWidth, columnCount, rowCount, columnStart, rowStart, columnSize, rowSize, gap, columnsMobile, columnsTablet, columnsDesktop, gapPx, rowGapPx, columnGapPx, alignItems, justifyItems

The style fields of the widget can also be bound as style.<field> (e.g. style.width, style.height, style.left, style.top).

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Bindings (Rules). These sections are described on the Page Editor page.