Page Grid Details

This topic describes the page grid properties.

A page is divided into grids, wherein multiple card layouts can be added. Select outside of the card layout to access the page's grid properties. By default, the page 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.
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.