Grid

Presentations v1.0 zero-schema

Lays children out in a reflowing grid. The grid scrolls vertically, so its MAIN axis is vertical: the per-item extent along it is a height, and the gap along it separates rows. Item width is not set directly — it follows from ItemsPerLine and the available width.

Required fields

PresentationType

Properties

PresentationType string required

In grid multiple items are displayed (such as images or text) in a structured way, with control over the number of items per row and the aspect ratio of each item.

Allowed Grid

ItemsPerLine integer, object optional

Columns per row. An integer fixes the count at every width. An object varies it by viewport using the five-step scale — {"ExtraSmall": 1, "Small": 2, "Medium": 3, "Large": 4, "ExtraLarge": 5} for <576, <768, <992, <1200 and >=1200 px. Note this scale differs from the sm/md/lg scale used by responsive value maps elsewhere.

Default 1

MinItemWidth number optional

Adaptive columns: fit as many equal columns as the available width allows, each at least this many logical pixels wide. When set, it takes precedence over ItemsPerLine. Prefer this over ItemsPerLine — it is the same model every platform implements natively (CSS auto-fill/minmax, SwiftUI GridItem(.adaptive), Flutter maxCrossAxisExtent) and needs no per-breakpoint tuning.

ItemHeight number, object optional

Fixed height of every item, in logical pixels. Takes precedence over ChildAspectRatio, which is ignored when this is set. Accepts a responsive value map.

RowGap number, object optional

Vertical gap between rows, in logical pixels. Accepts a responsive value map.

Default 0

ColumnGap number, object optional

Horizontal gap between columns, in logical pixels. Accepts a responsive value map.

Default 0

ChildAspectRatio number, object optional

Width-to-height ratio of each grid cell. Ignored whenever ItemHeight is set, since a fixed extent wins over a ratio.

Default 1

ItemWidth number, object optional deprecated

Deprecated: named the wrong axis — this always set the item HEIGHT. Use ItemHeight.

ColumnSpacing number, object optional deprecated

Deprecated: named the wrong axis — this always set the gap between ROWS. Use RowGap.

RowSpacing number, object optional deprecated

Deprecated: named the wrong axis — this always set the gap between COLUMNS. Use ColumnGap.

Children array optional

The list of widgets to be displayed in this Column.

{ "$id": "/schema/Presentations/Grid/1.0/index.json", "type": "object", "title": "Grid", "$schema": "http://json-schema.org/draft-07/schema#", "description": "Lays children out in a reflowing grid. The grid scrolls vertically, so its MAIN axis is vertical: the per-item extent along it is a height, and the gap along it separates rows. Item width is not set directly — it follows from ItemsPerLine and the available width.", "required": [ "PresentationType" ], "properties": { "PresentationType": { "enum": [ "Grid" ], "type": "string", "description": "In grid multiple items are displayed (such as images or text) in a structured way, with control over the number of items per row and the aspect ratio of each item." }, "ItemsPerLine": { "type": [ "integer", "object" ], "description": "Columns per row. An integer fixes the count at every width. An object varies it by viewport using the five-step scale — {\"ExtraSmall\": 1, \"Small\": 2, \"Medium\": 3, \"Large\": 4, \"ExtraLarge\": 5} for <576, <768, <992, <1200 and >=1200 px. Note this scale differs from the sm/md/lg scale used by responsive value maps elsewhere.", "default": 1 }, "MinItemWidth": { "type": "number", "description": "Adaptive columns: fit as many equal columns as the available width allows, each at least this many logical pixels wide. When set, it takes precedence over ItemsPerLine. Prefer this over ItemsPerLine — it is the same model every platform implements natively (CSS auto-fill/minmax, SwiftUI GridItem(.adaptive), Flutter maxCrossAxisExtent) and needs no per-breakpoint tuning." }, "ItemHeight": { "type": [ "number", "object" ], "description": "Fixed height of every item, in logical pixels. Takes precedence over ChildAspectRatio, which is ignored when this is set. Accepts a responsive value map." }, "RowGap": { "type": [ "number", "object" ], "description": "Vertical gap between rows, in logical pixels. Accepts a responsive value map.", "default": 0 }, "ColumnGap": { "type": [ "number", "object" ], "description": "Horizontal gap between columns, in logical pixels. Accepts a responsive value map.", "default": 0 }, "ChildAspectRatio": { "type": [ "number", "object" ], "description": "Width-to-height ratio of each grid cell. Ignored whenever ItemHeight is set, since a fixed extent wins over a ratio.", "default": 1 }, "ItemWidth": { "type": [ "number", "object" ], "deprecated": true, "description": "Deprecated: named the wrong axis — this always set the item HEIGHT. Use ItemHeight." }, "ColumnSpacing": { "type": [ "number", "object" ], "deprecated": true, "description": "Deprecated: named the wrong axis — this always set the gap between ROWS. Use RowGap." }, "RowSpacing": { "type": [ "number", "object" ], "deprecated": true, "description": "Deprecated: named the wrong axis — this always set the gap between COLUMNS. Use ColumnGap." }, "Children": { "type": "array", "description": "The list of widgets to be displayed in this Column.", "items": { "$ref": "/schema/shared/Widget/1.0/index.json" } } }, "examples": [ { "PresentationType": "Grid", "ItemHeight": 120, "RowGap": 16, "ColumnGap": 16, "ItemsPerLine": { "ExtraSmall": 1, "Small": 2, "Medium": 3, "Large": 4, "ExtraLarge": 4 }, "Children": [ { "PresentationType": "Container", "BackgroundColor": "#EEEEEE", "BorderRadius": 8, "Child": { "PresentationType": "Text", "Text": "One" } }, { "PresentationType": "Container", "BackgroundColor": "#EEEEEE", "BorderRadius": 8, "Child": { "PresentationType": "Text", "Text": "Two" } } ] }, { "PresentationType": "Grid", "ItemHeight": 90, "RowGap": 12, "ColumnGap": 12, "ItemsPerLine": { "ExtraSmall": 1, "Medium": 3 }, "Data": { "Provider": "Context", "Key": "_products" }, "Template": { "PresentationType": "Text", "Text": "$item['Name']" } } ], "x-icon": "<svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/></svg>", "x-exports": { "html": true, "ios": true }, "x-family": "Presentations", "x-name": "Grid", "x-version": "1.0", "x-source-package": "zero-schema" }

{ "PresentationType": "Grid", "ItemHeight": 120, "RowGap": 16, "ColumnGap": 16, "ItemsPerLine": { "ExtraSmall": 1, "Small": 2, "Medium": 3, "Large": 4, "ExtraLarge": 4 }, "Children": [ { "PresentationType": "Container", "BackgroundColor": "#EEEEEE", "BorderRadius": 8, "Child": { "PresentationType": "Text", "Text": "One" } }, { "PresentationType": "Container", "BackgroundColor": "#EEEEEE", "BorderRadius": 8, "Child": { "PresentationType": "Text", "Text": "Two" } } ] }

{ "PresentationType": "Grid", "ItemHeight": 90, "RowGap": 12, "ColumnGap": 12, "ItemsPerLine": { "ExtraSmall": 1, "Medium": 3 }, "Data": { "Provider": "Context", "Key": "_products" }, "Template": { "PresentationType": "Text", "Text": "$item['Name']" } }