Xamarin form: Why there is a gap in between the cells - forms

Question

I have a custom view in side the item on the right highlighted in black.
The each view cell has a big gap because of the black custom view. This black view is a grid which was added in the bindingContextChanged function.
public partial class ShiftTemplate : ViewCell
{
public ShiftTemplate()
{
InitializeComponent();
}
}
public class ShiftView : ContentView
{
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
var model = BindingContext as StaffShiftViewModel;
var grid = new Grid();
var shiftCount = 0;
var index = 0;
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
foreach (var shift in model.Shifts)
{
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
var timeLabel = new Label
{
Text = shift.Time,
VerticalTextAlignment = TextAlignment.Center,
HorizontalTextAlignment = TextAlignment.End
};
var clockButton = new Button
{
Text = shift.ClockStatus,
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Start,
Command = shift.OnClockingPopupCommand
};
var binding = new Binding();
binding.Source = shift;
binding.Path = nameof(shift.ClockStatus);
binding.Mode = BindingMode.OneWay;
clockButton.SetBinding(Button.TextProperty, binding);
var line = new BoxView { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.Center, HeightRequest = 1, BackgroundColor = Color.Gray };
grid.Children.Add(timeLabel, 0, 1, shiftCount, shiftCount+1);
grid.Children.Add(clockButton, 1, 2, shiftCount, shiftCount+1);
index += 1;
if (index < model.Shifts.Count)
grid.Children.Add(line, 0, 2, shiftCount + 1, shiftCount + 2);
shiftCount+=2;
}
Content = grid;
ForceLayout();
}
}