Components

grid

3min

The grid component enables you to create grid layouts in your app, organizing content into rows and columns for a visually consistent and flexible interface. It helps align elements proportionally, ensuring a structured design. The grid is ideal for creating galleries to display photos or product images, dashboards, menus, and product lists. This component is very similar to the jig.grid the only exception is that this component can be used in a jig.default with other components.

Configuration options

The grid component has two available configuration options:

  1. Auto Grid - used to create a grid layout from a datasource. This is similar in configuration to a jig.list where a single grid-item is configured and iterates through the datasource.
  2. Custom Grid - used to create a custom grid layout using widgets, images, or custom components in various sizes.

Core structure



type

Within a grid component, the grid-item component is used to define each of the elements in the grid layout. Within the grid-item a select set of components can be configured.

data

Configure a datasource to call the data in the grid layout. The data property is required for the Auto Grid, but is optional for the Custom Grid selection.

Examples and code snippets 

Auto grid
Auto grid


In this example, a gallery of images is created to showcase the services a company offers. The jig.default type, grid component and datasource is used, enabling a simple configuration based on the records in the datasource. The component.grid-item only needs to be configured once using the expression =@ctx.current.item. followed by the desired data field. Using current loops through the datasource, creating a grid item for each data record. Note that the specified size will apply to all returned records.

grid-cleaning-service.jigx
datasource (Dynamic Data)


This example demonstrates combining the grid component with other components (entity and form) in a default . The grid is customized to show an image component (4x2), a list widget (2x2) and chart widget (2x2).

Custom grid
Custom grid

grid-custom-component
list-with-stage-dd
chart-bar1_2x2




Updated 21 Mar 2025
Doc contributor
Did this page help you?