Layout Engine

Studio

Interactive Testbed

Layout

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

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

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

Active Layout Options

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