I am new into SwiftUI and learning it by making my application. I’m experiencing an issue with LazyVGrid in SwiftUI where the item widths are inconsistent. I’m trying to create a grid with a header and several items, but as you can see in the screenshot below, the items do not have uniform widths, leading to an uneven appearance.

I remove all leading&trailing modifiers, including items view to clarify behaviour. When I add any modifiers to adjust items widths, they are still different widths.

Does anybody know what kind of behaviour like this? How to maintain it?

struct IdeasView: View {
    
    let store: StoreOf<IdeasFeature>
    
    var gridItems: [GridItem] {
        if UIDevice.isIPad {
            [
                .init(.flexible(), spacing: 8),
                .init(.flexible(), spacing: 8)
            ]
        } else {
            [
                .init()
            ]
        }
    }
    
    var body: some View {
        self.content
            .onLoad {
                self.store.send(.view(.onViewLoad))
            }
    }
    
    @ViewBuilder private var content: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            NavigationStackStore(self.store.scope(state: .path,
                                                  action: .path)) {
                ScrollView(showsIndicators: false) {
                    LazyVGrid(columns: self.gridItems,
                              spacing: 10) {
                        Section {
                            ForEachStore(
                                self.store.scope(state: .initalItems,
                                                 action: .idea)
                            ) { itemStore in
                                IdeaItemView(store: itemStore)
                            }
                        } header: {
                            VStack {
                                Text("Here will be header with searchbar")
                                    .background(Color.teal)
                                    .frame(height: 130)
                            }
                        }
                    }
                }
                .modifier(NavigationBarModifier())
                .loader(isLoading: viewStore.isLoading)
                .refreshable {
                    await viewStore.send(.view(.onPulledToRefresh), while: .isLoading)
                }
            } destination: {
                switch $0 {
                case .details:
                    CaseLet(/IdeasFeature.Path.State.details,
                             action: IdeasFeature.Path.Action.details,
                             then: IdeaDetailsView.init(store:)
                    )
                }
            }
        }
    }
}

enter image description here

I tried make GridItem for iPhone with .absolute(Value). In this case items have consistent width. So it’s my back plan to calculate width somehow with GeometryReader. But it doesn’t look like good approach.