maui-linux/samples/ShellDemo/Pages/GridsPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ShellDemo.Pages.GridsPage"
             Title="Grids"
             BackgroundColor="{StaticResource PageBackground}">

    <ScrollView Orientation="Both">
        <VerticalStackLayout Spacing="25" Padding="20">

            <!-- Basic Grid -->
            <Label Text="Basic Grid (2x2)" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" />
            <Label Text="Equal columns using Star sizing" FontSize="12" TextColor="{StaticResource TextSecondary}" />
            <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" BackgroundColor="#F5F5F5">
                <Border Grid.Row="0" Grid.Column="0" BackgroundColor="#E3F2FD" Padding="10,8" StrokeThickness="0">
                    <Label Text="Row 0, Col 0" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="0" Grid.Column="1" BackgroundColor="#E8F5E9" Padding="10,8" StrokeThickness="0">
                    <Label Text="Row 0, Col 1" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="1" Grid.Column="0" BackgroundColor="#FFF3E0" Padding="10,8" StrokeThickness="0">
                    <Label Text="Row 1, Col 0" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="1" Grid.Column="1" BackgroundColor="#FCE4EC" Padding="10,8" StrokeThickness="0">
                    <Label Text="Row 1, Col 1" HorizontalTextAlignment="Center" />
                </Border>
            </Grid>

            <!-- Column Definitions -->
            <Label Text="Column Definitions" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />

            <Label Text="Auto: Sizes to content" FontSize="12" TextColor="{StaticResource TextSecondary}" />
            <Grid ColumnDefinitions="Auto,Auto,Auto" BackgroundColor="#F5F5F5">
                <Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
                    <Label Text="Auto" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
                    <Label Text="Auto Width" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
                    <Label Text="A" HorizontalTextAlignment="Center" />
                </Border>
            </Grid>

            <Label Text="Absolute: Fixed pixel widths (50, 100, 150)" FontSize="12" TextColor="{StaticResource TextSecondary}" Margin="0,10,0,0" />
            <Grid ColumnDefinitions="50,100,150" BackgroundColor="#F5F5F5">
                <Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
                    <Label Text="50px" HorizontalTextAlignment="Center" FontSize="10" />
                </Border>
                <Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
                    <Label Text="100px" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
                    <Label Text="150px" HorizontalTextAlignment="Center" />
                </Border>
            </Grid>

            <!-- Star Sizing -->
            <Label Text="Star Sizing (Proportional)" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
            <Label Text="Star proportions: 1* | 2* | 1* = 25% | 50% | 25%" FontSize="12" TextColor="{StaticResource TextSecondary}" />
            <Grid ColumnDefinitions="*,2*,*" BackgroundColor="#F5F5F5">
                <Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
                    <Label Text="1*" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
                    <Label Text="2* (double)" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
                    <Label Text="1*" HorizontalTextAlignment="Center" />
                </Border>
            </Grid>

            <!-- Row & Column Spacing -->
            <Label Text="Row &amp; Column Spacing" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />

            <Label Text="No spacing (RowSpacing=0, ColumnSpacing=0)" FontSize="12" TextColor="{StaticResource TextSecondary}" />
            <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="0" ColumnSpacing="0">
                <Border Grid.Row="0" Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
                    <Label Text="0,0" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="0" Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
                    <Label Text="0,1" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="1" Grid.Column="0" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
                    <Label Text="1,0" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="1" Grid.Column="1" BackgroundColor="#F8BBD9" Padding="10,8" StrokeThickness="0">
                    <Label Text="1,1" HorizontalTextAlignment="Center" />
                </Border>
            </Grid>

            <Label Text="With spacing (RowSpacing=10, ColumnSpacing=10)" FontSize="12" TextColor="{StaticResource TextSecondary}" Margin="0,10,0,0" />
            <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="10" ColumnSpacing="10">
                <Border Grid.Row="0" Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
                    <Label Text="0,0" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="0" Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
                    <Label Text="0,1" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="1" Grid.Column="0" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
                    <Label Text="1,0" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="1" Grid.Column="1" BackgroundColor="#F8BBD9" Padding="10,8" StrokeThickness="0">
                    <Label Text="1,1" HorizontalTextAlignment="Center" />
                </Border>
            </Grid>

            <!-- Row & Column Span -->
            <Label Text="Row &amp; Column Span" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
            <Label Text="Header spans 3 columns, Sidebar spans 2 rows" FontSize="12" TextColor="{StaticResource TextSecondary}" />
            <Grid ColumnDefinitions="*,*,*" RowDefinitions="Auto,Auto,Auto" RowSpacing="5" ColumnSpacing="5">
                <!-- Header spanning 3 columns -->
                <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="#1976D2" Padding="10,8" StrokeThickness="0">
                    <Label Text="ColumnSpan=3 (Header)" TextColor="White" HorizontalTextAlignment="Center" />
                </Border>
                <!-- Sidebar spanning 2 rows -->
                <Border Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" BackgroundColor="#388E3C" Padding="10,8" StrokeThickness="0">
                    <Label Text="RowSpan=2&#10;(Sidebar)" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                </Border>
                <!-- Content cells -->
                <Border Grid.Row="1" Grid.Column="1" BackgroundColor="#E3F2FD" Padding="10,8" StrokeThickness="0">
                    <Label Text="Content 1" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="1" Grid.Column="2" BackgroundColor="#E8F5E9" Padding="10,8" StrokeThickness="0">
                    <Label Text="Content 2" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="2" Grid.Column="1" BackgroundColor="#FFF3E0" Padding="10,8" StrokeThickness="0">
                    <Label Text="Content 3" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Row="2" Grid.Column="2" BackgroundColor="#FCE4EC" Padding="10,8" StrokeThickness="0">
                    <Label Text="Content 4" HorizontalTextAlignment="Center" />
                </Border>
            </Grid>

            <!-- Mixed Sizing -->
            <Label Text="Mixed Sizing" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
            <Label Text="Mixed: 60px | Star | Auto | 60px" FontSize="12" TextColor="{StaticResource TextSecondary}" />
            <Grid ColumnDefinitions="60,*,Auto,60" ColumnSpacing="5" BackgroundColor="#F5F5F5">
                <Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
                    <Label Text="60px" HorizontalTextAlignment="Center" FontSize="10" />
                </Border>
                <Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
                    <Label Text="Star (fills remaining)" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
                    <Label Text="Auto" HorizontalTextAlignment="Center" />
                </Border>
                <Border Grid.Column="3" BackgroundColor="#F8BBD9" Padding="10,8" StrokeThickness="0">
                    <Label Text="60px" HorizontalTextAlignment="Center" FontSize="10" />
                </Border>
            </Grid>

            <!-- Nested Grids -->
            <Label Text="Nested Grids" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
            <Label Text="Outer grid contains two nested 2x2 grids" FontSize="12" TextColor="{StaticResource TextSecondary}" />
            <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="10" ColumnSpacing="10" BackgroundColor="#E0E0E0" Padding="10">
                <!-- Nested Grid 1 -->
                <Grid Grid.Row="0" Grid.Column="0" ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="2" ColumnSpacing="2">
                    <Border Grid.Row="0" Grid.Column="0" BackgroundColor="#BBDEFB" Padding="8" StrokeThickness="0">
                        <Label Text="A" FontSize="10" HorizontalTextAlignment="Center" />
                    </Border>
                    <Border Grid.Row="0" Grid.Column="1" BackgroundColor="#90CAF9" Padding="8" StrokeThickness="0">
                        <Label Text="B" FontSize="10" HorizontalTextAlignment="Center" />
                    </Border>
                    <Border Grid.Row="1" Grid.Column="0" BackgroundColor="#64B5F6" Padding="8" StrokeThickness="0">
                        <Label Text="C" FontSize="10" HorizontalTextAlignment="Center" />
                    </Border>
                    <Border Grid.Row="1" Grid.Column="1" BackgroundColor="#42A5F5" Padding="8" StrokeThickness="0">
                        <Label Text="D" FontSize="10" HorizontalTextAlignment="Center" />
                    </Border>
                </Grid>
                <!-- Nested Grid 2 -->
                <Grid Grid.Row="0" Grid.Column="1" ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="2" ColumnSpacing="2">
                    <Border Grid.Row="0" Grid.Column="0" BackgroundColor="#C8E6C9" Padding="8" StrokeThickness="0">
                        <Label Text="1" FontSize="10" HorizontalTextAlignment="Center" />
                    </Border>
                    <Border Grid.Row="0" Grid.Column="1" BackgroundColor="#A5D6A7" Padding="8" StrokeThickness="0">
                        <Label Text="2" FontSize="10" HorizontalTextAlignment="Center" />
                    </Border>
                    <Border Grid.Row="1" Grid.Column="0" BackgroundColor="#81C784" Padding="8" StrokeThickness="0">
                        <Label Text="3" FontSize="10" HorizontalTextAlignment="Center" />
                    </Border>
                    <Border Grid.Row="1" Grid.Column="1" BackgroundColor="#66BB6A" Padding="8" StrokeThickness="0">
                        <Label Text="4" FontSize="10" HorizontalTextAlignment="Center" />
                    </Border>
                </Grid>
                <Label Grid.Row="1" Grid.Column="0" Text="Outer Grid Row 1" HorizontalOptions="Center" />
                <Label Grid.Row="1" Grid.Column="1" Text="Spans both columns" HorizontalOptions="Center" />
            </Grid>

            <BoxView HeightRequest="20" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>