Layout Controller Testbed

Layout Type

Component Count: 40

Sizing Mode

Column Gap: 40Row Gap: 10

Align Items

Justify Items

Flow Direction

Standard left-to-right, top-to-bottom grid fill.

Last Row AlignFlow Reverse

Corner Offset: 0

Explodes (positive) or implodes (negative) the four corners of the grid.

Enable Item Spanning

When enabled, components with `colSpan` or `rowSpan` properties will occupy multiple grid cells. This uses a more advanced algorithm.

Columns: 5

Gravity Test

Removes a symbol to see others fall down.

Refill Symbols (Avalanche)

Active Layout Options

{
  "layoutName": "square",
  "rowGap": 10,
  "spacing": 40,
  "sizingMode": "auto",
  "fixedWidth": 50,
  "fixedHeight": 50,
  "columns": 5,
  "alignItems": "center",
  "justifyItems": "center",
  "flowDirection": "default",
  "lastRowAlign": "start",
  "flowReverse": false,
  "honeycombOrientation": "pointy-top"
}