Grid

This topic describes the grid layout properties.

This layout appears like a grid structure divided into rows and columns. Within each grid cell, you can add multiple card layouts, with a mix of both flexbox and coordinate. The access to creating such hybrid layouts depends on your licensing. The access By default, the grid has 12 rows and 12 columns.

Properties

Field Name Description
Grid Type Choose from these grid types:
  • fit: The grid fits to the size of the available space irrespective of the specified number of rows and columns.
  • fixed: This is the default option. The grid appears in a fixed size based on the specified number of column and rows.
  • verticalFixed: The grid's row height is fixed. Column width is adjustable to fit to the size of the available space.
  • horizontalFixed: The grid's column width is fixed. Row height is adjustable to fit to the size of the available space.
Note: fit type grid layout is flexible, and it grows and shrinks to fit the objects, preventing the need for scrolling. fixed type grid layout maintains a constant size and may display scrollbars when the objects exceed the pre-defined dimensions.
Mobile Breakpoint This value determines the page grid layout adjustment on a mobile device.
Margin This value determines the size of the gap between the rows and columns.
Display Grid Choose how you want to display the grid on the page:
  • always: Shows the grid lines on the page.
  • onDrag&Resize: Allows to drag and resize grid columns and rows.
  • none: Hides the grid lines on the page.
Fixed Col Width Appears when Grid Type is fixed and horizontalFixed.

Enter a value to set a fixed width for the grid columns.
Fixed Row Height Appears when Grid Type is fixed and verticalFixed.

Enter a value to set a fixed width for the grid rows.
Min Cols Appears when Grid Type is fit and verticalFixed.

Enter a value to set minimum width for the grid columns.
Max Cols Appears when Grid Type is fit and verticalFixed.

Enter a value to set maximum width for the grid columns.
Min Rows Appears when Grid Type is fit and horizontalFixed.

Enter a value to set minimum width for the grid rows.
Max Rows Appears when Grid Type is fit and horizontalFixed.

Enter a value to set maximum width for the grid rows.
Row Height Ratio Appears when Grid Type is fit.
Outer Margin Appears when Grid Type is fit, verticalFixed, and horizontalFixed.