LazyVGrid where every item takes only the place it needs

Question

I just wondered how you could make a LazyVGrid where every item takes only the place it needs, not less and not more.

I know about .flexible() but the problem is: My Items are different sized, that means I don't know how many of them will fit in a row.

Do you got any ideas? Thanks for your help! Boothosh

EDIT:

LazyVGrid(columns: [GridItem(.flexible())]) {
            Color.blue
                .frame(width: 200, height: 200)
            Color.blue
                .frame(width: 100, height: 100)
            Color.blue
                .frame(width: 100, height: 100)
        }

This is a example what Im talking about. I want to achieve that this items are placed with evenly space around them. (Not below each other, like they are now)

Can you create a [mre] to reproduce the issue? You can mimic different sized `Color` views, with varying values in `.aspectRatio(1, contentMode: .fit)`, for example. — George, Sep 23 '21 at 13:36

score 1 · Answer 1 · answered Sep 23 '21 at 18:42

You just need to specify what you want by using variables. Try this :

struct ContentView: View {
let data = (1...100).map { "Item \($0)" }

let columns = [
   // The number of grid Items here represent the number of columns you will 
   //see. so you can specify how many  items in a row thee are .
   // 2 grid Items =  2 items in a row
    GridItem(.flexible()),
    GridItem(.flexible()),
]

var body: some View {
    ScrollView {
        LazyVGrid(columns: columns, spacing: 20) {
            ForEach(data, id: \.self) { item in
                Text(item)
            }
        }
        .padding(.horizontal)
    }
    .frame(maxHeight: 300)
}
}

Problem is `let columns = [ GridItem(.flexible())]`. Because I don't know how many of this flexible Items should fit In one row. I want as many as possible in a row :(, you know what I mean? Thanks for your help — Boothosh81, Sep 23 '21 at 19:55

LazyVGrid where every item takes only the place it needs

1 Answers1