Skip to main content



Previous versions of the Toolkit supported imposing a grid when dragging elements, but not when running a layout or resizing groups. From version 5.x up the Toolkit offers a more comprehensive approach to imposing a grid on your UI, featuring:

  • the ability to restrict element dragging to a grid
  • the ability to fit auto sized groups to the grid
  • the ability to magnetize elements to a grid

Configuring a grid

To set a grid on a Surface element, you need to specify it in the render options:

toolkitInstance.render(someElement, {
size:{w:50, h:50}

This will:

  • restrict element dragging so that elements can only be placed in 50 pixel increments in each axis
  • when auto sizing a group, ensure that the size chosen is a multiple of 50 pixels in each axis
  • restrict the magnetizer to only placing elements at 50 pixels increments in each axis when it runs.

This does not configure the underlying layout to use 50 pixels increments.

Drawing Tools

The drawing tools plugin will, by default, observe any grid that is set on the Surface to which it is attached: elements will only be able to be resized in increments of the grid. You can switch off this behaviour if you wish to, by setting the ignoreGrid option on the drawing tools plugin:

toolkit.render(someElement, {

Drag/Drop Manager

The drag/drop manager will honour any grid that is set on the Surface to which it is attached.

Grid backgrounds

This is handled by the background plugin