Overlapping buttons in Xamarin.Forms grid

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.