Grid Definition

July 14, 2026 · View on GitHub

Grid is the workhorse layout of MAUI. FmgLib.MauiMarkup makes its two verbose parts — row/column definitions and child placement — concise and type-safe.

Row & Column Definitions

RowDefinitions / ColumnDefinitions accept a builder lambda with three methods:

Builder method	Meaning	XAML equivalent
`Star(double value = 1.0, int count = 1)`	Proportional share of remaining space	`2`, ``
`Auto(int count = 1)`	Size to content	`Auto`
`Absolute(double value, int count = 1)`	Fixed device-independent units	`100`

The optional count parameter repeats the definition, which removes copy-paste for uniform grids.

new Grid()
.RowDefinitions(e => e.Star(2).Star(0.5, count: 3))
.ColumnDefinitions(e => e.Absolute(100).Star())
.Children(
    // ...
)

This creates:

4 rows — the first takes 2 “stars” (twice the space of a 1-star row); rows 2–4 take 0.5 stars each.
2 columns — a fixed 100-unit column, then a column absorbing all remaining width.

Equivalent XAML for comparison:

<Grid RowDefinitions="2*,0.5*,0.5*,0.5*" ColumnDefinitions="100,*">

Mixed example:

new Grid()
.RowDefinitions(e => e.Auto().Star().Auto())        // header / content / footer
.ColumnDefinitions(e => e.Star(3).Star(7))          // 30% / 70%

Placing Children

Attached-property helpers position children (see Attached Properties):

Method	XAML equivalent
`.Row(int)`	`Grid.Row`
`.Column(int)`	`Grid.Column`
`.RowSpan(int)`	`Grid.RowSpan`
`.ColumnSpan(int)`	`Grid.ColumnSpan`
`.GridSpan(column, row)`	both spans at once

Row and column default to 0, so the first cell needs no calls.

Complete Example

A classic 2×2 colored grid:

new Grid()
.RowDefinitions(e => e.Star(2).Star())
.ColumnDefinitions(e => e.Absolute(200).Star())
.Children(
    new BoxView().Color(Colors.Green),
    new Label().Text("Column 0, Row 0"),

    new BoxView().Color(Colors.Blue).Column(1).Row(0),
    new Label().Text("Column 1, Row 0").Column(1).Row(0),

    new BoxView().Color(Colors.Teal).Column(0).Row(1),
    new Label().Text("Column 0, Row 1").Column(0).Row(1),

    new BoxView().Color(Colors.Purple).Column(1).Row(1),
    new Label().Text("Column 1, Row 1").Column(1).Row(1)
)

Multiple children may share a cell (they stack in z-order; later children draw on top). Use .ZIndex(int) to override stacking.

Real-World Layout — a product card

new Grid()
.RowDefinitions(e => e.Star(1).Star(6).Star(2).Star(1))
.Padding(5)
.Children(
    // row 0: favorite icon + discount badge
    new Grid()
    .Row(0)
    .ColumnDefinitions(e => e.Star(6).Star(4))
    .Children(
        new ImageButton().Source("heart.png").AlignLeft().SizeRequest(30, 30),
        new Frame().Column(1).CornerRadius(20).BackgroundColor(Colors.Red)
            .Content(new Label().Text("-50%").TextColor(Colors.White).Center())
    ),

    // row 1: product image
    new Image().Source("product.png").SizeRequest(80, 80).Row(1).CenterHorizontal(),

    // row 2: name + price
    new VerticalStackLayout().Row(2).Children(
        new Label().Text("Sourdough Bread").FontAttributes(FontAttributes.Bold),
        new Label().Text("\$4.90").TextColor(Colors.Green)
    ),

    // row 3: action
    new Button().Row(3).Text("Add to cart").HeightRequest(35)
)

Spacing and Sizing

All regular Grid properties are available fluently:

new Grid()
.RowSpacing(8)
.ColumnSpacing(8)
.Padding(16)
.BackgroundColor(Colors.WhiteSmoke)

Alternative: Collection-Based Definitions

If you already have definition collections (or prefer explicit objects), overloads accept them directly, and the same Auto/Star/Absolute helpers exist as extensions on ColumnDefinitionCollection / RowDefinitionCollection:

new Grid()
.ColumnDefinitions(new ColumnDefinitionCollection().Absolute(100).Star())

Tips

Prefer count: for uniform grids: e => e.Star(1, count: 7) creates a 7-row calendar strip in one call.
Auto rows measure content each pass — use them for headers/footers, not for long lists (put a CollectionView in a Star row instead).

Children placed without definitions all land in the single implicit cell — a Grid with no definitions is a convenient overlay container:

new Grid().Children(
    new Image().Source("photo.png"),
    new Label().Text("Caption").AlignBottomCenter().TextColor(Colors.White)
)

Layout Options — positioning children within cells
Attached Properties