📐 Layouts in .NET MAUI – Grid

Grid Layout in .NET MAUI

The Grid is recognized as the most versatile and powerful layout container in .NET MAUI. Unlike one-dimensional layouts like StackLayout, a Grid organizes UI elements into a two-dimensional structure of rows and columns. This allows for complex, pixel-perfect designs that remain responsive across mobile and desktop screens.

Core Concepts of the MAUI Grid

The Grid works by defining a set of horizontal rows and vertical columns. Each intersection creates a "cell" where you can place a control such as a Button or Label.

• RowDefinitions and ColumnDefinitions: These collections define how many rows and columns exist and how large they are.
• Sizing Modes:
  • Auto: Sizes the row or column to fit its content.
  • Star (*): Takes a proportional share of remaining space (e.g., 2* is twice as large as 1*).
  • Absolute: Uses a fixed size such as 100 device-independent units.
• Attached Properties: Controls are positioned using Grid.Row and Grid.Column. These values are zero-based.
• Spanning: Elements can span multiple cells using Grid.RowSpan or Grid.ColumnSpan.

Why Use Grid Over StackLayout?

Modern .NET MAUI development prefers Grid for performance and flexibility.

• Reduced Nesting: A single Grid can replace several nested StackLayouts, reducing layout complexity and improving performance.
• Layering: Elements placed in the same cell can overlap and are rendered in XAML order, making overlays and backgrounds easy to implement.

XAML Example: A Simple Login Header

The following example creates a header with an icon on the left and a title that fills the remaining space.

        <!-- A Grid with 1 row and 2 columns -->
        <Grid ColumnDefinitions="Auto, *"
              RowDefinitions="Auto"
              ColumnSpacing="10"
              Padding="10">

        <Image Source="logo.png"
               HeightRequest="40"
               WidthRequest="40"
               Grid.Column="0" />

        <Label Text="Welcome to MAUI"
               FontSize="20"
               VerticalOptions="Center"
               Grid.Column="1" />
        </Grid>

Advanced Features

• Simplified Definitions: Rows and columns can be defined using comma-separated values such as ColumnDefinitions="Auto, *, 2*".
• GridSplitter: On Windows and macOS, GridSplitter allows users to resize rows or columns at runtime.
• Performance Caution: Avoid excessive use of Auto rows or columns in complex lists, as they require additional size calculations.

The Grid is the primary tool for building structured layouts in .NET MAUI. It is ideal for headers, dashboards, calculators, and any interface that requires precise alignment and flexibility.

Grid is a powerful layout in .NET MAUI that arranges child elements into rows and columns. It is useful for creating structured, table-like layouts.

Key Features

• 🧩 Organizes content into rows and columns.
• 📏 Supports flexible sizing: Auto, Star (*), and fixed values.
• ⚡ Allows spanning across multiple rows or columns.
• 🎨 Ideal for dashboards, forms, and structured layouts.

Example: Simple Grid

<Grid RowDefinitions="Auto,Auto,*"
      ColumnDefinitions="Auto,*">

    <Label Text="Username:" 
           Grid.Row="0" Grid.Column="0" />

    <Entry Placeholder="Enter username" 
           Grid.Row="0" Grid.Column="1" />

    <Label Text="Password:" 
           Grid.Row="1" Grid.Column="0" />

    <Entry Placeholder="Enter password" IsPassword="True" 
           Grid.Row="1" Grid.Column="1" />

    <Button Text="Login" 
            Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" />

</Grid>
  

Explanation of Example

• 📄 RowDefinitions="Auto,Auto,*" → First two rows sized to content, last row takes remaining space.
• 📄 ColumnDefinitions="Auto,*" → First column sized to content, second column fills remaining width.
• 🧩 Labels and entries are placed in specific row/column positions.
• ➡️ The Login button spans across both columns in the last row.

Conclusion

Grid provides a flexible way to design structured layouts in MAUI. It is more powerful than StackLayout when you need precise control over positioning.