I would like to create a grid that is similar to a chess layout and labeled from 1 to 100 starting at the bottom left. It should look somewhat like this:

…

5(white) 6(black) 7(white) 8(black)

1(black) 2(white) 3(black) 4(white)

I cannot get the labeling or coloring to display correctly. This is my attempt. How can I adjust it?

import SwiftUI

struct LevelOverviewView: View {
    
    let numberOfLevels = 100
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: Array(repeating: GridItem(.fixed(70)), count: 4), content: {
                ForEach((1...numberOfLevels).reversed(), id: .self) { i in
                    ZStack{
                        Rectangle()
                            .fill(i % 2 == 0 ? .black : .white)
                            .aspectRatio(1.0, contentMode: .fit)
                        Text("(i)")
                            .foregroundStyle(i % 2 == 1 ? .black : .white)
                    }
                }
            })
        }
        .background(.red)
    }
}

#Preview {
    LevelOverviewView()
}