NUI / Components / Layout

GridPanel

ImplementedLayout

GridPanel places children into explicit rows and columns.

Supported as a row and column layout container.

Overview

GridPanel places children into explicit rows and columns.

When to use

Forms.
Inventory-like layouts.
Stat grids.
Any layout where row and column coordinates matter.

Children

Supports normal children.

nui

children {
    Text ChildText {
        text: "THIS IS THE CHILD COMPONENT"
        row: 0
        column: 0
    }
}

Basic syntax

nui

GridPanel StatsGrid {
    rowFill: "1,1"
    columnFill: "1,2"

    children {
        Text ChildText {
            text: "THIS IS THE CHILD COMPONENT"
            row: 0
            column: 0
        }
    }
}

Supported properties

Property	Type	Required	Default	Description
`rowFill`	string	No	Unset	Row fill coefficients.
`columnFill`	string	No	Unset	Column fill coefficients.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`padding`	margin	No	margin(0)	Inner padding.
`childPadding`	margin	No	margin(0)	Padding around children.
`backgroundColor`	color	No	Transparent	Optional background color.
`horizontalAlign`	enum	No	Inherited	Component horizontal alignment.
`verticalAlign`	enum	No	Inherited	Component vertical alignment.
`opacity`	number	No	1	Render opacity.
`layer`	integer	No	Context default	Layer order inside layered parents.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

Children of GridPanel may use grid slot properties. GridPanel itself may receive stack, canvas, wrap, or ExpandableArea slot properties only when it is a child of the matching parent. See section 7.

Full syntax example

nui

GridPanel StatsGrid {
    rowFill: "1,1"
    columnFill: "1,2"
    width: 420
    height: 220
    padding: margin(8)
    childPadding: margin(4)
    backgroundColor: "#0F172A"
    horizontalAlign: fill
    verticalAlign: top
    opacity: 1
    layer: 1
    visible: true

    children {
        Text ChildText {
            text: "THIS IS THE CHILD COMPONENT"
            row: 0
            column: 0
            rowSpan: 1
            columnSpan: 1
            nudge: vec2(0, 0)
        }
    }
}

Limitations

Grid slot properties are valid only on direct children of GridPanel or UniformGridPanel.
Do not place child nodes directly inside GridPanel without children { ... }.
Do not use gap on GridPanel.