ios – LazyVGrid with Textual content() impacts spacing when content material is empty

Whole beginner, in Swift and SwiftUI however I could not discover a easy reply therefore, asking right here.

I’ve a LazyVGrid that comprises a ForEach that renders RoundedRectangle that comprises Textual content. The grid wraps the rectangles appropriately and provides the spacing between the rows. Nevertheless, when tapping on a rectangle, I take away the contained Textual content and once I do that for all gadgets in a row, the gadgets shift momentarily.

I get that there’s some inside padding/margin/and so on. going coming from inside Textual content however this isn’t seen within the content material view preview. I can after all, simply repair it by having an empty Textual content, however this does not really feel proper.

Can somebody clarify why that is taking place and any concepts on correctly repair it? — Thanks

associated code:

LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]) {
    ForEach(emojis[0..<emojiCount], id: .self) { emoji in
        CardView(content material: emoji).aspectRatio(3/4, contentMode: .match)
    }
}

//----

struct CardView: View {
    var content material: String
    @State var isFaceUp = true
    var physique: some View {
        ZStack {
            let form = RoundedRectangle(cornerRadius: 20)
            
            if isFaceUp {
                form.fill().foregroundColor(.white)
                form.strokeBorder(lineWidth: 3)
                Textual content(content material).font(.largeTitle)
            } else {
                form.fill()
            }
        }.onTapGesture {
            isFaceUp = !isFaceUp
        }
    }
}