LazyVGrid in Xcode 13 ignores Spacer

It seems the behavior of LazyVGrid has changed a bit in Xcode 13. For my use case, I need a grid with each item's height being variable.

Here is the implementation:

struct ExampleLazyVGrid: View {

    private let columns = Array(repeating: GridItem(.flexible(), spacing: 24), count: 4)

    private let sizes: [CGFloat] = [100, 150, 80, 110, 50, 120, 90, 40, 130, 140, 70, 60]

    var body: some View {
      LazyVGrid(columns: columns, alignment: .leading, spacing: 24) {
        ForEach(sizes, id: \.self) { size in
          VStack(spacing: 0) {
            Rectangle()
              .fill(Color.gray)
              .frame(width: size, height: size)

            Spacer()
          }
        }
      }
      .background(Color.gray.opacity(0.5))
    }
  }

In Xcode 12.5, the rectangles are aligned at the top as expected as shown here:

In Xcode 13, the Spacer() is ignored and the rectangles are no longer top aligned as shown here:

So same code, just different behavior between Xcode 12.5 and Xcode 13. I'm experimenting with a workaround, but seems like a bug to me?

In GridItem, you can specify the alignment, which in your example is .topLeading
Try:

private let columns = Array(repeating: GridItem(.flexible(), spacing: 24, alignment: .topLeading), count: 4)

That seems to give the result you want.

It can be possible for default values to change, between versions of Xcode?
Probably best to specify the exact behavior that you want.

Did that fix it for you, @karig?

LazyVGrid in Xcode 13 ignores Spacer
 
 
Q