grid-item

4min

The grid-item component serves as the child component whenever any grid component has been configured, as discussed in the grid﻿  section. The component determines how the grid items are displayed, allowing you to customize the UI elements in the grid. 
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
Core structure
﻿
size
Select the size that the grid-item will be displayed in, the options are 1x1,2x2, 2x4, 4x2, 4x4.
children
The following components can be used in the grid-item:
﻿Custom components (Alpha)﻿ 
﻿image﻿ 
﻿widgets﻿ 
Considerations
When using the grid-item with a component.jig-widget, note of the following:
A widgetId is required if the referenced  includes a widget configuration. This value should match the Widget Name specified in the referenced . 
If no widget configuration exists, the widget's icon is derived from the 's icon value. If none is specified, a default icon is assigned.
﻿Examples and code snippets ﻿
Grid-items
﻿
In this example, three grid items are configured, each with a different size and type. 
Grid-item using an image component with a size specified of 4x2.  
Grid-item using a list component with a size specified as 2x2. The grid-item automatically shows the list.
Grid-item using a chart widget with a size of 2x2. 
grid-item-sales.jigx
list-with-stage-dd
chart-bar1_2x2
# Supporting file for the first widget jig in the grid-item.
# Using jig.list ensures the widget automatically displays,
# without configuring a widget property. 
title: Flight Schedule
description: List with Stage
type: jig.list
icon: plane-1

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1490430657723-4d607c1503fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZmxpZ2h0c3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60

data: =@ctx.datasources.flight-schedule-dynamic
item:
  type: component.stage
  options:
    icon: plane-1
    right:
      title: =@ctx.current.item.toabrv
      subtitle: =@ctx.current.item.disembark
    left:
      title: =@ctx.current.item.fromabrv
      subtitle: =@ctx.current.item.board
         
# Supporting file for the first widget jig in the grid-item.
# Using jig.list ensures the widget automatically displays,
# without configuring a widget property. 
title: Flight Schedule
description: List with Stage
type: jig.list
icon: plane-1

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1490430657723-4d607c1503fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZmxpZ2h0c3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60

data: =@ctx.datasources.flight-schedule-dynamic
item:
  type: component.stage
  options:
    icon: plane-1
    right:
      title: =@ctx.current.item.toabrv
      subtitle: =@ctx.current.item.disembark
    left:
      title: =@ctx.current.item.fromabrv
      subtitle: =@ctx.current.item.board
         
﻿
﻿
﻿
﻿

Core structure
size	Select the size that the grid-item will be displayed in, the options are 1x1,2x2, 2x4, 4x2, 4x4.
children	The following components can be used in the grid-item: Custom components (Alpha) image widgets

Updated 21 Mar 2025

Did this page help you?

grid

image

grid-item

﻿Configuration options﻿

Core structure

Considerations

﻿Examples and code snippets ﻿

Grid-item with image and widget

Configuration options

Examples and code snippets