SwiftUI .gridCellColums() causing grid to shrink

Question

I'm using the .gridCellColumns() modifier to merge a view across several views but when I do this, my entire grid shrinks for some reason. Can anyone recommend a solution or a way to debug this? I've simplified things as much as I can below.

The BLUE grid on top shows everything working fine. The RED grid below shows the "1 2 3" views merged into a single "4" view with .gridCellColumns(3) and the grid shrinks for some reason.

    var body: some View {
        VStack(alignment: .leading, content: {
            
            
            HStack {
                Text("Grid Layout Issue")
                    .bold()
                Spacer()

            }
                .font(.title)
                .padding(.bottom, 12)

            Grid {
                GridRow {
                    HStack {
                        Text("Title A goes here")
                            .lineLimit(1)
                        Spacer()
                    }
                    Text("1")
                    Text("2")
                    Text("3")
                }

                GridRow {
                    HStack {
                        Text("Title B goes here")
                            .lineLimit(1)
                        Spacer()
                    }
                    Text("1")
                    Text("2")
                    Text("3")
                }

            }
            .border(Color.blue)
            
            Grid {
                GridRow {
                    HStack {
                        Text("Title A goes here")
                            .lineLimit(1)
                        Spacer()
                    }
                    Text("1")
                    Text("2")
                    Text("3")
                }

                GridRow {
                    HStack {
                        Text("Title B goes here")
                            .lineLimit(1)
                        Spacer()
                    }
                    Text("4")
                        .gridCellColumns(3)       // CHANGE IS HERE <-----
                }

            }
            .border(Color.red)

            Spacer()

        })
        .padding()
    }

With Spacer().frame(height: 0)

Answer 1

I was able to use .layoutPriority() modifier to get everything to play nicely:

Grid {
    GridRow {
        Text("Title A goes here (long text)")
            .lineLimit(1)
            .layoutPriority(1)
        Spacer()
            .frame(height: 4)
        Text("1").layoutPriority(2)
        Text("2").layoutPriority(2)
        Text("3").layoutPriority(2)
    }
    
    GridRow {
        Text("Title A goes here (long text)")
            .lineLimit(1)
            .layoutPriority(1)
        Spacer()
            .frame(height: 4)
        Text("4")
            .gridCellColumns(3)
            .layoutPriority(2)
    }

}