SwiftUI LazyVGrid - align top

Question

I have a load of cards which I need to display in a vGrid. However, the cards have dynamic heights and what I want to do is have the cards in the columns align to the top.

This is the current setup:

let resultGridLayout = [GridItem(.adaptive(minimum: 160), spacing: 10)]

func itemsView() -> some View {
        VStack {
            filterButton()
                .padding(.bottom)
            LazyVGrid(columns: resultGridLayout, spacing: Constants.ItemsGrid.spacing) {
                ForEach(MockData.resultsData, id: \.id) { result in
                    ProductCardView(viewModel: .init(container: viewModel.container, menuItem: result))
                }
            }
            .padding(.horizontal, Constants.ItemsGrid.padding)
        }
    }

Here is how the layout currently is:

So each item is being centered in it's column space, whereas what I want to happen is for them to align across the top of each row.

Obviously the alignment modifier for vGrid allows us to align horizontally (.center, .leading, .trailing etc) but how can I stop these being aligned vertically in the centre?

Answer 1

I assume you wanted to align grid item itself, like

let resultGridLayout = [GridItem(.adaptive(minimum: 160), spacing: 10, 
                          alignment: .top)]    // << here !!

Tested with Xcode 13.3 / iOS 15.4 (on some replication)