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)
        }
    }
}

Which space are you referring to? The vertical space or the space horizontally between the items in the row? — Yrb, Feb 14 '22 at 14:33

score 0 · Answer 1 · answered Feb 14 '22 at 17:51

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.

How to eliminate spacing around LazyHGrid items?

1 Answers1