.NET MAUI › XAML & UI Layouts

How does the Grid layout work in MAUI?

Intermediate

Answer

Grid arranges children in rows and columns defined by RowDefinitions and ColumnDefinitions. Sizes can be Auto (fit content), * (proportional star sizing), or absolute. Children are placed with Grid.Row and Grid.Column, and can span cells with Grid.RowSpan/ColumnSpan. It is the most flexible layout for complex screens.

<Grid RowDefinitions="Auto,*" ColumnDefinitions="2*,*">
    <Label Grid.Row="0" Grid.ColumnSpan="2" Text="Header" />
    <BoxView Grid.Row="1" Grid.Column="0" Color="Silver" />
    <BoxView Grid.Row="1" Grid.Column="1" Color="Teal" />
</Grid>

Real-world example A dashboard uses a Grid to keep a fixed header row and a content area that splits 2:1 between a chart and a details panel at any window size.

Common follow-ups: What does star sizing mean? | How do you span multiple columns?

Layouts Responsive UI FlexLayout