LazyVGrid code behaves differently in different Xcode versions? - swift

Question

I was just watching Standord's CS193p (2021 editions)
The instructor shows this as an example of LazyVGrid:
As you see the spacing is equal in every direction.
Now here is how I see it with the exact same code in Xcode 14.2 (it's the same with 9 cards too):
I double checked and the code is exactly the same for both of us!
import SwiftUI
struct ContentView: View {
var emojis = ["✈️", "🚀", "🚑", "🚕", "🚁", "🚜", "🚂", "🛻", "🏍️"]
#State var emojiCount = 8
var body: some View {
VStack {
LazyVGrid(columns: [GridItem(),GridItem(),GridItem(),GridItem()]) {
ForEach(emojis[0..<emojiCount], id: \.self) { emoji in
CardView(content: emoji).aspectRatio(2/3, contentMode: .fit)
}
}
.foregroundColor(.red)
Spacer()
HStack {
remove
Spacer()
add
}
.font(.largeTitle)
.padding(.horizontal)
}
.padding(.horizontal)
}
var remove: some View {
Button {
if emojiCount > 1 {
emojiCount -= 1
}
} label: {
Image(systemName: "minus.circle")
}
}
var add: some View {
Button {
if emojiCount < emojis.count {
emojiCount += 1
}
} label: {
Image(systemName: "plus.circle")
}
}
}
struct CardView: View {
var content: String
#State var isFaceUp: Bool = true
var body: some View {
ZStack {
let shape = RoundedRectangle(cornerRadius: 25)
if isFaceUp {
shape.fill(.white)
shape.stroke(lineWidth: 3)
Text(content).font(.largeTitle)
} else {
shape.fill(.red)
}
}
.onTapGesture {
isFaceUp = !isFaceUp
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
ContentView()
.preferredColorScheme(.dark)
}
}
How is that possible? if Apple just changes the behavior like that, what happens to old apps when running in newer devices?
Also, how can I set the vertical spacing to be exactly the same as horizonal spacing? (I am aware I can set the vertical spacing like this: LazyVGrid(columns:..., spacing: 10), but that is a fixed amount and not always equal to horizontal spacing depending on the cols)
Timed link to the video on Youtube
Edit:
Funny enough, removing the Text() inside card or adding .padding() to it fixes the issue, but I still don't understand why, it is more confusing when you watch the video:
Link to Video