Overlapping buttons in Xamarin.Forms grid - xaml

Question

I'm trying to develop a Xamarin.Forms application.
I have the following grid, displayed like a piano keyboard:
and, for example, this code, in xaml:
<Grid ColumnSpacing="2">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Button
Grid.RowSpan="2"
Grid.Column="0"
BackgroundColor="White"
Text="C"
TextColor="Black"
WidthRequest="45" />
<Button
Grid.RowSpan="2"
Grid.Column="1"
BackgroundColor="White"
Text="D"
TextColor="Black"
WidthRequest="45" />
<Button
Grid.RowSpan="2"
Grid.Column="2"
BackgroundColor="White"
Text="E"
TextColor="Black"
WidthRequest="45" />
<Button
Grid.RowSpan="2"
Grid.Column="3"
BackgroundColor="White"
Text="F"
TextColor="Black"
WidthRequest="45" />
<Button
Grid.RowSpan="2"
Grid.Column="4"
BackgroundColor="White"
Text="G"
TextColor="Black"
WidthRequest="45" />
<Button
Grid.RowSpan="2"
Grid.Column="5"
BackgroundColor="White"
Text="A"
TextColor="Black"
WidthRequest="45" />
<Button
Grid.RowSpan="2"
Grid.Column="6"
BackgroundColor="White"
Text="B"
TextColor="Black"
WidthRequest="45" />
<Button
Grid.Column="0"
Grid.ColumnSpan="2"
BackgroundColor="Black"
HorizontalOptions="Center"
Text="C#"
TextColor="White"
WidthRequest="35" />
<Button
Grid.Column="1"
Grid.ColumnSpan="2"
BackgroundColor="Black"
HorizontalOptions="Center"
Text="D#"
TextColor="White"
WidthRequest="35" />
<Button
Grid.Column="3"
Grid.ColumnSpan="2"
BackgroundColor="Black"
HorizontalOptions="Center"
Text="F#"
TextColor="White"
WidthRequest="35" />
<Button
Grid.Column="4"
Grid.ColumnSpan="2"
BackgroundColor="Black"
HorizontalOptions="Center"
Text="G#"
TextColor="White"
WidthRequest="35" />
<Button
Grid.Column="5"
Grid.ColumnSpan="2"
BackgroundColor="Black"
HorizontalOptions="Center"
Text="A#"
TextColor="White"
WidthRequest="35" />
</Grid>
My issue is that when I click a white button (e.g. "A" button), this happens:
Do you happen to know how I can fix the position of the buttons, in order to avoid this overlapping?
I'm not sure if the grid is the best way to achieve what I want to display, but I assumed it would be a good choice. If you have a better container for this, please let me know.