Skip to main content
Defines a flexible grid area that consists of columns and rows. Children can span multiple columns/rows and support pixel, auto, and star sizing.

​
Namespace

Avalonia.Controls

​
Inheritance

Control → Panel → Grid

​
Properties

​
ColumnDefinitions
ColumnDefinitions
Gets or sets the collection of ColumnDefinition objects that define column characteristics.
​
RowDefinitions
RowDefinitions
Gets or sets the collection of RowDefinition objects that define row characteristics.
​
ColumnSpacing
double
Gets or sets the size of the spacing to place between grid columns.
​
RowSpacing
double
Gets or sets the size of the spacing to place between grid rows.
​
ShowGridLines
bool
Gets or sets whether grid lines are visible. Useful for debugging layout.

​
Attached Properties

​
Grid.Column
int
Gets or sets the column index for a child control. Default is 0.
​
Grid.Row
int
Gets or sets the row index for a child control. Default is 0.
​
Grid.ColumnSpan
int
Gets or sets the number of columns that a child control spans. Default is 1.
​
Grid.RowSpan
int
Gets or sets the number of rows that a child control spans. Default is 1.
​
Grid.IsSharedSizeScope
bool
Gets or sets whether the grid is a shared size scope.

​
Static Methods

​
SetColumn(Control, int)
void
Helper for setting Column property on a Control.
​
GetColumn(Control)
int
Helper for reading Column property from a Control.
​
SetRow(Control, int)
void
Helper for setting Row property on a Control.
​
GetRow(Control)
int
Helper for reading Row property from a Control.
​
SetColumnSpan(Control, int)
void
Helper for setting ColumnSpan property on a Control.
​
GetColumnSpan(Control)
int
Helper for reading ColumnSpan property from a Control.
​
SetRowSpan(Control, int)
void
Helper for setting RowSpan property on a Control.
​
GetRowSpan(Control)
int
Helper for reading RowSpan property from a Control.

​
Usage

​
XAML Example - Basic Grid

<Grid ColumnDefinitions="Auto,*,100" 
      RowDefinitions="50,Auto,*"
      ShowGridLines="True">
  
  <!-- First column, first row -->
  <TextBlock Grid.Column="0" Grid.Row="0" 
             Text="Label:" />
  
  <!-- Second column, first row -->
  <TextBox Grid.Column="1" Grid.Row="0" />
  
  <!-- Third column, spanning all rows -->
  <Border Grid.Column="2" Grid.Row="0" Grid.RowSpan="3"
          Background="LightGray" />
  
  <!-- Second row spanning two columns -->
  <Button Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2"
          Content="Submit" />
  
  <!-- Third row -->
  <ScrollViewer Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2">
    <TextBlock Text="Content here" />
  </ScrollViewer>
</Grid>

​
XAML Example - Responsive Layout

<Grid ColumnDefinitions="*,*,*" 
      RowDefinitions="Auto,*,Auto"
      ColumnSpacing="10"
      RowSpacing="10">
  
  <!-- Header spanning all columns -->
  <TextBlock Grid.ColumnSpan="3" 
             Text="Dashboard" 
             FontSize="24" />
  
  <!-- Three equal width panels -->
  <Border Grid.Column="0" Grid.Row="1" 
          Background="#1E88E5" />
  <Border Grid.Column="1" Grid.Row="1" 
          Background="#43A047" />
  <Border Grid.Column="2" Grid.Row="1" 
          Background="#FB8C00" />
  
  <!-- Footer spanning all columns -->
  <TextBlock Grid.Row="2" Grid.ColumnSpan="3" 
             Text="Status: Ready" />
</Grid>

​
C# Example - Creating Grid Programmatically

var grid = new Grid
{
    ColumnDefinitions = new ColumnDefinitions("200,*,Auto"),
    RowDefinitions = new RowDefinitions("Auto,*,50"),
    ColumnSpacing = 10,
    RowSpacing = 10
};

var label = new TextBlock { Text = "Name:" };
Grid.SetColumn(label, 0);
Grid.SetRow(label, 0);
grid.Children.Add(label);

var textBox = new TextBox();
Grid.SetColumn(textBox, 1);
Grid.SetRow(textBox, 0);
Grid.SetColumnSpan(textBox, 2);
grid.Children.Add(textBox);

var button = new Button { Content = "Submit" };
Grid.SetColumn(button, 1);
Grid.SetRow(button, 2);
grid.Children.Add(button);

​
Column and Row Definitions

<Grid>
  <Grid.ColumnDefinitions>
    <!-- Fixed width -->
    <ColumnDefinition Width="100" />
    
    <!-- Auto size to content -->
    <ColumnDefinition Width="Auto" />
    
    <!-- Star sizing (proportional) -->
    <ColumnDefinition Width="*" />
    
    <!-- 2x star sizing -->
    <ColumnDefinition Width="2*" />
    
    <!-- With min/max constraints -->
    <ColumnDefinition Width="*" MinWidth="50" MaxWidth="300" />
  </Grid.ColumnDefinitions>
  
  <Grid.RowDefinitions>
    <RowDefinition Height="50" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
</Grid>

​
Form Layout Example

<Grid ColumnDefinitions="Auto,*" 
      RowDefinitions="Auto,Auto,Auto,Auto,*,Auto"
      ColumnSpacing="10"
      RowSpacing="10"
      Margin="10">
  
  <TextBlock Grid.Column="0" Grid.Row="0" Text="First Name:" />
  <TextBox Grid.Column="1" Grid.Row="0" />
  
  <TextBlock Grid.Column="0" Grid.Row="1" Text="Last Name:" />
  <TextBox Grid.Column="1" Grid.Row="1" />
  
  <TextBlock Grid.Column="0" Grid.Row="2" Text="Email:" />
  <TextBox Grid.Column="1" Grid.Row="2" />
  
  <TextBlock Grid.Column="0" Grid.Row="3" Text="Phone:" />
  <TextBox Grid.Column="1" Grid.Row="3" />
  
  <TextBlock Grid.Column="0" Grid.Row="4" Text="Notes:" 
             VerticalAlignment="Top" />
  <TextBox Grid.Column="1" Grid.Row="4" 
           AcceptsReturn="True" 
           TextWrapping="Wrap" />
  
  <StackPanel Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2"
              Orientation="Horizontal" 
              HorizontalAlignment="Right">
    <Button Content="Cancel" Margin="0,0,10,0" />
    <Button Content="Save" />
  </StackPanel>
</Grid>

​
GridUnitType

Column and row definitions support three sizing modes:
​
Pixel
Absolute size in pixels. Example: Width="100"
​
Auto
Size to content. Example: Width="Auto"
​
Star
Proportional sizing. Example: Width="*" or Width="2*"

​
Source File

Grid.cs:1-1200+

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us