My code is import SwiftUI struct ContentView: View { var emojis = ["🚂", "🤡", "🚀", "🚁", "🚕", "😅", "✅", "👍", "🥳", "🎃"] @State var emojiCount = 6 var body: some View { VStack { ScrollView { LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]) { 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(action: { 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: 20) if isFaceUp { shape.fill().foregroundColor(.white) shape.strokeBorder(lineWidth: 3) Text(content) .font(.largeTitle) } else { shape.fill() } } .onTapGesture { isFaceUp = !isFaceUp } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() .preferredColorScheme(.light) ContentView() .preferredColorScheme(.dark) } } Then I get Actually, the spacing between rows is too large, I want the spacing between rows to be the same as the spacing between columns. If I make all cards from shape.fill().foregroundColor(.white) shape.strokeBorder(lineWidth: 3) Text(content) .font(.largeTitle) to shape.fill() shape is RoundedRectangle. Then I get the right row spacing that I want If I delete `Text(content).font(.largeTitle), I will also get the right row spacing. It's like the Text increase the row spacing. But why? And how can I just get the same row spacing as column spacing with Text(emoji) inside the card.