How do I align multiple columns in a LazyVStack?

Question

I am trying to make a grid which has multiple columns using a lazyvstack. I want the items to align perfectly, regardless of its length.

This is what I want:

However, with my code down below, I am getting this:

.

let events = [["1234567890", "08:00-16:45", "work"],
                      ["12345678901234567890", "10:30-11:00", "meeting b"],
                      ["1234", "14:15-15:00", "meeting cc"],
                      ["123", "16:00-17:15", "meeting dddddddddddddddddd"]]

        ScrollView(showsIndicators: false) {
            LazyVGrid(
                columns: [
                    GridItem(.flexible(), alignment: .leading), GridItem(.flexible(), alignment: .center), GridItem(.flexible(), alignment: .leading),
                ],
                spacing: 20,
                pinnedViews: [],
                content: {
                    ForEach(0 ..< events.count, id: \.self) { index in
                        Text(events[index][0])
                            .font(.body)
                            .fontWeight(.light)
                            .lineLimit(1)
                        Text(events[index][1])
                            .font(.body)
                            .fontWeight(.light)
                        Text(events[index][2])
                            .font(.body)
                            .fontWeight(.light)
                            .lineLimit(1)
                    }
                }
            )
        }
        .frame(maxHeight: 300)
        .padding(20)
        .background(RoundedRectangle(cornerRadius: 15)
            .stroke(Color.blue, lineWidth: 3)
            .frame(maxWidth: .infinity, maxHeight: 350)
            .padding(10)
        )

What is the problem here?

Answer 1

You will have to adjust the modifiers on the GridItem. For example this would do the trick, and then would need to get readjusted to your liking and might need some spacing.

Here you can read more about flexible, adaptive and fixed: https://developer.apple.com/documentation/swiftui/griditem

 columns: [
    GridItem(.flexible(minimum: 0, maximum: 300), alignment: .leading), 
    GridItem(.flexible(minimum: 0, maximum: 100), alignment: .center), 
    GridItem(.flexible(minimum: 0, maximum: 300), alignment: .leading),
    ],