Folowing code

struct EditView: View {
    var body: some View {
          NavigationView {
                Form {
                      Section("Colors") {
                          ColorList(colors: viewModel.game.gameColors)
                      }
                }
          }
    }
}

struct ColorList: View {
    let colors: [String]

    private let gridItemLayout = [GridItem(.adaptive(minimum: 44))]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: gridItemLayout) {
                ForEach(colors, id: \.self) { colorName in
                    Meeple(colorName: colorName)
                }
                .padding(.vertical, 2)
            }
        }
    }
}

// Meeple is just an image
struct Meeple: View {
    // ...
    var body: some View {
        Image("meeple.2.fill")
            .resizable()
            .padding(5)
            .foregroundColor(color.color)
            .background(color.backgroundColor)
            .frame(width: 44, height: 44, alignment: .center)
            .clipShape(RoundedRectangle(cornerRadius: 5))
            .shadow(color: .primary, radius: 5)
    }
}

works and gives me this result, which works well (actually for the detail view).

As soon as I add a NavigationLink around the ColorList like so

                Section("Colors") {
                    NavigationLink(destination:
                                    MultiColorPickerView(
                                        selection: $viewModel.game.colors.withDefaultValue([])
                                    )
                    ) {
                        ColorList(colors: viewModel.game.gameColors)
                    }
                }

The result looks weird:

There's plenty of space left. Why does it break after 3 items? And how can I make it to show more in one line?