CODEWITHSUNDEEP
swiftuilazyvgridlazyhgrid
amey rane
amey rane

Reputation: 315

How can I use LazyVGrid to create flexible card widths in different rows?

I want to display three cards in a single row. However, the challenge is to make the first and last cards width larger than the other two cards within the same row. The expected output is as follows.

Expected Output

I am using LazyVStack to achieve this but not able to add items with different width in a single column.

Upvotes: 0

Views: 338

Answers (1)

FPST
FPST

Reputation: 41

You can do so using Grid.

Grid {
    GridRow {
        Rectangle()
            
            .gridCellColumns(2)
        Rectangle()
        Rectangle()
            
    }
    .padding()
    .frame(height: 330)
    
    GridRow {
        Rectangle()
        Rectangle()
        Rectangle()
            .gridCellColumns(2)
    }
    .padding()
    .frame(height: 330)
}
.foregroundStyle(Color.red)

I find this guide quite helpful with Grids or the official docs.

Upvotes: 0

Related Questions