Skip to main content

Grid

Grid Component

BRICKS TOOLS avatar
Written by BRICKS TOOLS
Updated over 2 weeks ago
  • Grid Component Overview

The Grid component allows users to present content on display devices in a structured grid layout.

It also supports a Slideshow basic carousel mode, which includes both images and videos.


  • Frame Section

The basic frame properties are the same as those of the Rect component. For details, please refer to the Frame section of the Rect component documentation.


  • Properties Section

The basic properties of the Grid component inherit from the Rect component. For details, please refer to the Properties section of the Rect component documentation.

Additional properties are described below:

Property Name

Type

Description

Default Left

number


Numeric value


Set the Grid’s x-position within the Canvas.

Default Top

number


Numeric value


Set the Grid’s y-position within the Canvas.

Default Width

number


Numeric value


Set the Grid block’s width within the Canvas.

Default Height

number


Numeric value


Set the Grid block’s height within the Canvas.

Items Per Row

number


Numeric value


Number of items per row.

Auto Grow

bool


Boolean value


Auto-fit width when the number of items is fewer than itemsPerRow.

Auto Fix Height

bool


Boolean value


Ignore height and use the width value as the height.

Wrap

bool


Boolean value


If the computed item height is less than the frame height, compute an appropriate row height.

Items

array



Required parameter list for generating Bricks.

Default Items

array



Required parameters for Items.


  • Properties – Border Section

The basic border properties are the same as those of the Rect component. For details, please refer to the Border section of the Rect component documentation.


  • Animations Section

The basic animation event properties are the same as those of the Rect component. For details, please refer to the Animation section of the Rect component documentation.


  • Events Section

The basic event properties are the same as those of the Rect component. For details, please refer to the Event section of the Rect component documentation.

// Link to Event tutorial article

Did this answer your question?