Двухколоночный Grid с адаптивными квадратными элементами

Задача: отобразить элементы в две колонки так, чтобы они заняли всю доступную ширину экрана и были квадратными, то есть их ширина равнялась высоте.

С одной стороны все просто — необходимо использовать LazyVGrid. Но с какой конфигурацией? Раз нужна адаптивность по ширине при постоянном количестве колонок, то подойдут два GridItem с flexible-размером:

private let columns = [
    GridItem(.flexible()),
    GridItem(.flexible())
]

В итоге получим следующую картину.

Где не хватает условия: высота = ширине. И задать его с помощью настроек Grid нельзя. Но можно через модификатор aspectRatio у самих элементов.

struct ContentView: View {
    private let columns = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    private let colors: [Color] = [
        .red,
        .gray,
        .green,
        .yellow,
        .blue,
        .cyan,
        .black,
        .indigo,
        .mint,
        .orange
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns) {
                ForEach(colors, id: \.self) { color in
                    color
                        .aspectRatio(1, contentMode: .fill)
                }
            }
            .padding()
        }
    }
}

Теперь все выводится как надо.