How to eliminate spacing around LazyHGrid items?

Question

I've set the spacing on the LazyHGrid and the GridItems to 0, yet there is still spacing in the vertical direction. Why is that? How do I eliminate that spacing?

struct ContentView: View {
    
    let strs: [String] = ["aa", "", "bbbb"]
    let hgRows: [GridItem] = [GridItem(.fixed(60), spacing: 0), GridItem(.fixed(60), spacing: 0)]
    
    var body: some View {
        VStack(spacing: 0) {
            Text("Stuff at top").padding().frame(maxWidth: .infinity).background(Color.blue.opacity(0.5))
            Divider()
            ScrollView(.horizontal) {
                LazyHGrid(rows: hgRows, spacing: 0) {
                    ForEach(1..<10) { i in
                        Text("B\(i).\(strs[i % strs.count])")
                            .padding().border(Color.gray, width: 1)
                    }
                }
                .padding(0)
                .background(Color.green.opacity(0.5)) // Give HGrid a green background so I can see where it is.
            }.layoutPriority(1)
            Divider()
            Spacer().layoutPriority(2)
        }
    }
}

Answer 1

By adjusting the GridItems, it's possible to eliminate the vertical space between items:

let hgRows: [GridItem] = [GridItem(.fixed(51), spacing: 0), GridItem(.fixed(51), spacing: 0)]

It clearly isn't the best solution, but that's how I fixed it. I hope this answers your question.