Table of Contents

Class Grid

Namespace
Xui.Core.UI.Layout
Assembly
Xui.Core.dll

A container view that arranges children in a grid of rows and columns. Container-level properties mirror the CSS Grid spec.

public class Grid : ViewCollection, ILayerHost, IServiceProvider
Inheritance
Grid
Implements
Inherited Members
Extension Methods

Remarks

Implementation notes:

  • Track sizing supports: Length, Auto, MinContent, MaxContent, Fr (fractional units), MinMax, and FitContent
  • Auto-placement follows grid-auto-flow (row or column direction)
  • Named grid areas are parsed from TemplateAreas
  • Gaps are applied between tracks
  • Alignment is supported via justify-items, align-items, justify-content, align-content
  • Child positioning via grid-row-start/end, grid-column-start/end, and grid-area

Algorithm approach:

  1. Build grid structure: parse areas, determine placement for each child
  2. Measure tracks: resolve fixed sizes, content-based sizes, then distribute fr units
  3. Arrange children: position each child in its grid area with alignment

Fields

Area

Places the item into a named grid area defined by TemplateAreas. Corresponds to CSS grid-area.

public static readonly View.Extra<string?> Area

Field Value

View.Extra<string>

ColumnEnd

The grid line where the item's column ends (1-indexed, exclusive). 0 means auto. Corresponds to CSS grid-column-end.

public static readonly View.Extra<nint> ColumnEnd

Field Value

View.Extra<nint>

ColumnSpan

The number of columns the item spans. Shorthand for setting ColumnEnd = ColumnStart + ColumnSpan.

public static readonly View.Extra<nint> ColumnSpan

Field Value

View.Extra<nint>

ColumnStart

The grid line where the item's column starts (1-indexed). 0 means auto. Corresponds to CSS grid-column-start.

public static readonly View.Extra<nint> ColumnStart

Field Value

View.Extra<nint>

Order

Controls the order in which the item appears within the grid, overriding source order. Corresponds to CSS order.

public static readonly View.Extra<nint> Order

Field Value

View.Extra<nint>

RowEnd

The grid line where the item's row ends (1-indexed, exclusive). 0 means auto. Corresponds to CSS grid-row-end.

public static readonly View.Extra<nint> RowEnd

Field Value

View.Extra<nint>

RowSpan

The number of rows the item spans. Shorthand for setting RowEnd = RowStart + RowSpan.

public static readonly View.Extra<nint> RowSpan

Field Value

View.Extra<nint>

RowStart

The grid line where the item's row starts (1-indexed). 0 means auto. Corresponds to CSS grid-row-start.

public static readonly View.Extra<nint> RowStart

Field Value

View.Extra<nint>

Properties

AutoColumns

Sizing for implicitly created columns (those outside TemplateColumns). Corresponds to grid-auto-columns. Default is Auto.

public Grid.TrackSize AutoColumns { get; set; }

Property Value

Grid.TrackSize

AutoRows

Sizing for implicitly created rows (those outside TemplateRows). Corresponds to grid-auto-rows. Default is Auto.

public Grid.TrackSize AutoRows { get; set; }

Property Value

Grid.TrackSize

ColumnGap

Space between grid columns. Corresponds to column-gap. Default is 0.

public NFloat ColumnGap { get; set; }

Property Value

NFloat

GridAlignContent

Aligns the grid along the block axis within the container when the grid is smaller than the container. Corresponds to align-content. Default is Start.

public Grid.AlignContent GridAlignContent { get; set; }

Property Value

Grid.AlignContent

GridAlignItems

Sets the default block-axis alignment for all grid items within their grid areas. Corresponds to align-items. Default is Stretch.

public Grid.AlignItems GridAlignItems { get; set; }

Property Value

Grid.AlignItems

GridAutoFlow

Controls how auto-placed items flow into the grid. Corresponds to grid-auto-flow. Default is Row.

public Grid.AutoFlow GridAutoFlow { get; set; }

Property Value

Grid.AutoFlow

GridJustifyContent

Aligns the grid along the inline axis within the container when the grid is smaller than the container. Corresponds to justify-content. Default is Start.

public Grid.JustifyContent GridJustifyContent { get; set; }

Property Value

Grid.JustifyContent

GridJustifyItems

Sets the default inline-axis alignment for all grid items within their grid areas. Corresponds to justify-items. Default is Stretch.

public Grid.JustifyItems GridJustifyItems { get; set; }

Property Value

Grid.JustifyItems

RowGap

Space between grid rows. Corresponds to row-gap. Default is 0.

public NFloat RowGap { get; set; }

Property Value

NFloat

TemplateAreas

Defines named grid areas. Each string in the array defines one row; space-separated cell names define columns within that row. A dot (.) denotes an unnamed cell. Corresponds to grid-template-areas. Default is an empty array.

public string[] TemplateAreas { get; set; }

Property Value

string[]

TemplateColumns

Defines the track sizes for explicitly defined columns. Corresponds to grid-template-columns. Default is an empty array (no explicit columns).

public Grid.TrackSize[] TemplateColumns { get; set; }

Property Value

TrackSize[]

TemplateRows

Defines the track sizes for explicitly defined rows. Corresponds to grid-template-rows. Default is an empty array (no explicit rows).

public Grid.TrackSize[] TemplateRows { get; set; }

Property Value

TrackSize[]

Methods

ArrangeCore(Rect, IMeasureContext)

Positions children within the border-edge rectangle. Frame assignment and alignment offset are handled by ArrangeShell(ref LayoutGuide).

protected override void ArrangeCore(Rect rect, IMeasureContext context)

Parameters

rect Rect
context IMeasureContext

MeasureCore(Size, IMeasureContext)

Returns the desired border-edge size given the available border-edge space. Margin, min/max clamping, and fixed-size short-circuit are handled by MeasureShell(ref LayoutGuide).

protected override Size MeasureCore(Size availableBorderEdgeSize, IMeasureContext context)

Parameters

availableBorderEdgeSize Size
context IMeasureContext

Returns

Size