SwiftUI how to create square cells in a grid.. and a couple of other hard to implement requirements

I'm looking to create a grid of square cells. Each square cell will have a 'large' text label in the center and a 'small' textLabel in the bottom left corner.

I feel like the pseudo code would look something like:

ZStack {
     Text("3", horizontalAlignment: .center, verticalAlignment: .center)
          .font(.title)
     Text("1,2,4", horizontalAlignment: .leading, verticalAlignment: .bottom)
          .font(.caption)
}
     .border(Color.black, width: 2.0)

There would be several rows and several columns of these cells. Their size would then be derived by the number of rows/columns and the available screen space.


I've written some code that approximates what I'm going for, but it is using specific frame dimensions.
I would prefer to not need specific width/height numbers.

struct ContentView: View {
    var body: some View {
        ZStack() {
            Rectangle()
                .fill(Color.clear)
                .border(Color.black, width: 2.0)
                .frame(width: 100, height: 100)
            Text("4")
                .font(.title)
            Text("x")
                .alignmentGuide(HorizontalAlignment.center) { d in
                    return 45
                }
            .alignmentGuide(VerticalAlignment.center) { d in
                return -30
            }
            .font(.caption)
        }
    }
}

Grateful for any/all help,

Mike

SwiftUI how to create square cells in a grid.. and a couple of other hard to implement requirements
 
 
Q