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)

Override to arrange children within this view's final frame.

protected override void ArrangeCore(Rect rect, IMeasureContext context)

Parameters

rect Rect
context IMeasureContext

MeasureCore(Size, IMeasureContext)

Override to compute the desired border-edge size.

protected override Size MeasureCore(Size availableBorderEdgeSize, IMeasureContext context)

Parameters

availableBorderEdgeSize Size
context IMeasureContext

Returns

Size