grid

Arranges content as tiles, arranged from top left to bottom right.

Field Configurations

Key	Type	Description	Default Value
"children"	Array	List of child layers.	null
"columns"	Number	The number of columns.	12
"consumesKeyboard"	Boolean	If 'true' is set, the grid adjusts automatically when the keyboard is opened. iOS only.	false
"displayMode"	DisplayMode	Determines in which way the elements should be loaded.	"eager"
"fullyVisible"	String	Specifies whether to fire the scroll event when an element is visible or only when it is fully visible.	null
"horizontalItemSpacing"	UnitSize	Spacing between elements in the horizontal direction	0
"insets"	Object	Insets the content of the grid by the given values.	null
"scrollDirection"	String	The direction in which the grid scrolls.	null
"scrollEvent"	String	Event that is fired while scrolling	null
"scrollOnAppear"	String	The grid will automatically scroll to the set value when it appears.	"none"
"scrolling"	Boolean	Indicates if scrolling is allowed	true
"verticalItemSpacing"	UnitSize	Spacing between elements in the vertical direction	0
"verticalScrollIndicator"	Boolean	Specifies whether a scroll indicator should be displayed.	false

Inherited

From Base Layer

Base Layer

Field Configurations

Key	Type	Description	Default Value
"_value"	Value	[PREVIEW] Dynamic value of the layer.	null
"accessibilityAppendState"	String	Defines this layer appends its state to the accessibility text.	null
"accessibilityText"	String	Text for accessibility navigation. Can be translated.	null
"actions"	ActionList	List of actions, which will be executed when the layer is tapped.	null
"borderColor"	Color	The color of the border in hex color value.	null
"borderRadius"	UnitSize	The radius applies to all corners; with a borderWidth of 0 the border is not drawn and radius is set anyway.	0
"borderWidth"	UnitSize	The width of the border.	0
"bottomLeftRadius"	UnitSize	Radius for the bottom left corner.	0
"bottomRightRadius"	UnitSize	Radius for the bottom right corner.	0
"classes"	Array	List of classes for layer styles.	null
"conditions"	Conditions	List of conditions to alter the layer state.	null
"constraints"	Constraints	A list of constraints defining the position of the layer in a layout.	null
"consumesKeyboard"	Boolean	This layer will be used to shrink, if a keyboard is shown.	null
"dataKey"	String	Name for assigning data to this layer.	null
"focusColor"	Color	The highlight color of this layer when it is focused. Mainly used on TV. If no color is provided, the pressedColor will be used.	null
"hidden"	Boolean	Indicates whether the layer is hidden. Default: false.	false
"isAccessibilityElement"	String	Defines if this layer is important for accessibility navigation. The default depends on the layer type.	null
"layerRotation"	Number	The layer is rotated by the specified degree.	0
"name"	String	Unique name in the layout. Used for alignment or actions.	null
"opacity"	Number	The opacity of the layer.	1
"overInsetBottom"	Boolean	Determines if this layer ignores the save space at the bottom of the device.	false
"overInsetTop"	Boolean	Determines if this layer ignores the save space at the top of the device.	false
"pressedColor"	Color	The highlight color of this layer when it is pressed. Mainly used on TV. If no color is provided, the focusColor will be used.	null
"safeArea"	SafeAreaTypeObject	Determines the safe area behaviour.	null
"shadowElevation"	Number	The elevation of this layer for casting shadows.	0
"state"	String	The state the layer will use as default.	"default"
"states"	LayerStates	A list of named states that affect the appearance of the layer.	null
"topLeftRadius"	UnitSize	Radius for the top left corner.	0
"topRightRadius"	UnitSize	Radius for the top right corner.	0
"touchFeedback"	TouchFeedback	Determines if the layer should show a touch feedback if touched.	"visible"
"trackingKey"	String	Defines a key for a scroll event.	null
"type"	LayerType	The type of the layer	null
"value"	Value	(Initial) value of the layer.	null

Examples

Example 1: Grid with 3 columns

Show ExampleHide Example

This grid serves as a template that will be modified in the following examples.

{
  "type": "grid",
  "columns": 3,
  "children": [
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "01"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "02"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "03"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "04"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "05"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "06"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "07"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "08"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "09"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    }
  ]
}

The grid constraint is unique to layers displayed within a grid. The colSpan field specifies how many colums the layer should occupy horizontally within the grid.

Example 2: Eliminate elements

Show ExampleHide Example

To eliminate elements from a grid, simply remove them from the grid's children array.

{
  "type": "grid",
  "columns": 3,
  "children": [
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "01"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "02"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "04"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "05"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "06"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "07"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "08"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    }
  ]
}

Example 3: Expand elements

Show ExampleHide Example

To expand elements horizontally inside a grid, increase the value of the colSpan field inside the grid constraint. The colSpan can not be bigger than the grid's column count.

{
  "type": "grid",
  "name": "grid03Grid01",
  "columns": 3,
  "children": [
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "01"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "02"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "03"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "04"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "columnspan": {
          "value": "$lang(gridColumnspanTwo)$"
        },
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "05"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 2,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "06"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "07"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "columnspan": {
          "value": "$lang(gridColumnspanTwo)$"
        },
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "08"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 2,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "09"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    }
  ]
}

If necessary, the elements of a grid are automatically moved to the next row.

Example 4: Change column amount

Show ExampleHide Example

The amount of colums in a grid is specified in the columns field.

{
  "type": "grid",
  "columns": 4,
  "children": [
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "01"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "02"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "03"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "04"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "05"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "06"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "07"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "08"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "09"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    }
  ]
}

Example 5: Grid with only 1 column

Show ExampleHide Example

Single-column grids can be a simple yet effective tool for layouts.

{
  "type": "grid",
  "columns": 1,
  "children": [
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "01"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElement"
          ]
        },
        "number": {
          "value": "02"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    },
    {
      "type": "layout",
      "value": "grid_element",
      "data": {
        "color": {
          "classes": [
            "gridElementLight"
          ]
        },
        "number": {
          "value": "03"
        }
      },
      "constraints": [
        {
          "type": "grid",
          "colSpan": 1,
          "height": "110pt"
        }
      ]
    }
  ]
}