Consistent spacing on a grid of ContainerRelativeShapes?

Hello, I'm trying to make a grid of container-relative shapes, where outside gutters match the gutters in between the items.

This stickiest part of this problem is the fact that calling .inset on a ContainerRelativeShape doubles the gutter in between the items.

I've tried LazyVGrid, and an HStack of VStacks, and they all have this double gutter in between.

I think I could move forward with some gnarly frame math, but I was curious if I'm missing some SwiftUI layout feature that could make this easier and more maintainable.

Answered by J0hn in 710702022

Discovered using a negative spacing in the VStack+HStack technique that matches the relative shape inset works well enough:

                HStack(spacing: -3) {
                    VStack(spacing: -3) {
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                    }

                    VStack(spacing: -3) {
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                    }
                }
Accepted Answer

Discovered using a negative spacing in the VStack+HStack technique that matches the relative shape inset works well enough:

                HStack(spacing: -3) {
                    VStack(spacing: -3) {
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                    }

                    VStack(spacing: -3) {
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                    }
                }
Consistent spacing on a grid of ContainerRelativeShapes?
 
 
Q