Introduction

Free-form grids are a sparse grid layout, where widgets can be placed anywhere within the grid. They do not enforce a particular structure, making them ideal for things such as dashboards.

The layout property of a FlexiTarget’s configuration (see FlexiTarget) allows you to define a FlexiTarget that uses a free-form layout. It is an object with the following properties:

export type FreeFormTargetLayout = {
	type: 'free';
	minRows?: number;
	minColumns?: number;
	maxRows?: number;
	maxColumns?: number;
	collapsibility?: FreeGridCollapsibility;
};

• type: The type of layout to use, where free defines a free-form grid.
• minColumns: The minimum number of columns that the grid should have.
• minRows: The minimum number of rows that the grid should have.
• maxColumns: The maximum number of columns that the grid should have. When equal to minColumns, the grid will not expand in the column direction.
• maxRows: The maximum number of rows that the grid should have. When equal to minRows, the grid will not expand in the row direction.
• collapsibility: Whether the grid collapses to remove empty rows and columns, and if so, when. Can be any of:
  • none (don’t collapse)
  • leading (collapse at the start of the grid)
  • trailing (collapse at the end of the grid)
  • endings (collapse at either end of the grid)
  • or any (collapse any empty row/column).

Example

The following code creates us a basic free-form grid with a non-expandable 2x2 layout:

Considerations

Free-form grids have some main considerations:

• When creating a FlexiWidget that is part of a free-form grid, you must explicitly specify an x and y prop (zero-indexed). Due to the sparse nature of the grid, Flexiboards is not designed to automatically infer a position to drop the widget at.
• You can only have up to 32 columns in a free-form grid (any maxColumns value greater than 32 will be ignored). This is because under the hood, Flexiboards uses 32-bit bitmaps to track free-form layouts.

More Examples

If you would like to see any further examples of free-form grids in action, be sure to check out the open-source Dashboard and Numbers examples, which are both built using free-form grids.