NOTE: In v0.1, there was ambiguity between the base (stored on the target’s configuration) and min properties (stored within this layout object). A breaking change has been made to the library meaning that baseRows and baseColumns are now deprecated.

These will be removed in v0.3. Use layout.minRows and layout.minColumns instead to set the initial size of the grid.

Additionally, the expandColumns and expandRows properties on layout are now deprecated. These will be removed in v0.3. Use maxColumns and maxRows instead to control the expandability of the grid.

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;
};

• 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.

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.