The Grid Layer is a container that arranges its child Layers into a grid of rows and columns.

It’s ideal for creating structured layouts such as icon panels and uniform tile groups.

Overview #

• The Grid Layer automatically divides its available space into evenly sized “cells”.
• Each child Layer is placed into one cell in row–column order.
• The total number of columns determines how items wrap into new rows.
• Each item inside the grid respects its own alignment settings, controlling how it sits within its cell.
  • NOTE: Child Layers of a grid must have Horizontal / Vertical Alignment set to “Center” to be placed correctly into their cell!
• Cells of the grid are not inherently visible, so utilize the styling of child Layers to highlight their structure if needed.

Properties #

This Layer supports all of the universal Layer properties along with some of its own.

Columns #

Determines how many columns the grid will have.

• The grid automatically calculates the number of rows based on how many items it contains.
• If fewer items exist than the column count, only the needed columns are filled.
• Increasing or decreasing the column count automatically reflows the grid’s layout.

Example:

• 3 columns with 7 items will produce 3 rows (two full rows, one partial).

Visible Items #

Maximum number of children to show from the start of the list, per sibling order.

Any children beyond this count will not be visible in the Layout.

Background # #

This property is of the Brush Property type, which allows for color and visual styling of the Layer.

Defines the brush used to fill the area specified by the Width and Height of the Layer.

Opacity Mask #

This property is of the Brush Property type, which allows for color and visual styling of the Layer.

Applies a mask effect over the grid’s rendered content to control how it blends or fades. This can be used to create gradient transparency, fade effects, or highlight shapes.

Layout Behavior #

Cell Arrangement #

• The grid creates evenly sized cells based on the total number of columns and child Layers.
• Each child Layer is measured to determine the best fit size.
• The grid calculates cell rectangles and places children one by one:
  • Left-to-right for each row.
  • Then top-to-bottom for subsequent rows.

Cell Sizing #

The cell width and height are determined by the grid’s overall bounds. Cells expand to evenly fill the available space.

Alignment Inside Cells #

Child Layers of a grid must have Horizontal / Vertical Alignment set to “Center” to be placed correctly into their cell!

The other alignments do not have grid-centric behavior and will align to the bounds of the grid itself.

Reflow and Responsiveness #

When items are added, removed, or reordered:

• The grid automatically recalculates its cell positions.
• Rows and columns are rebuilt in order.
• The layout remains balanced, with no manual repositioning required.

If you change the Columns value:

• The number of visible rows will change immediately.
• Existing items are repositioned automatically into their new grid order.