'Break a LazyVGrid into pieces

I have the following grid made in SwiftUI with this code:

let columnGrid = [GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0)]

LazyVGrid(columns: columnGrid, spacing: 0) {
                        ForEach((0...80), id: \.self) {
                            Text("\(positions[$0])")
                                .font(.system(size: 27))
                                .frame(width: boxWidth, height: boxWidth)
                                .background(Rectangle().stroke(lineWidth: 0.5))
                        }
                    }

How can I break the grid into pieces? For example, break the grid into groups of 4 blocks.

a b     e g     i j
c d     f h     k l

m n     q r
o p     s t

etc.

Every time I try a combination of LazyVGrid or a massive amount of HStacks and VStacks, it seems super bloated.

I also tried pinned headers with sections but it could only break things up into rows. I want it to break into rows and columns.

Is there a simple way to do this in SwiftUI?

A grid made with LazyVStack



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source