Skip to content

Cell height incorrect when using gridSpan #45

@bsrobinson

Description

@bsrobinson

I've just found this package, and it looks fantastic; but I'm having an issue with the layout - hopefully you can help...

I'm using a grid in scroll mode to display a grid of artist posters. They are sorted (desc) by a 'rank' value, and this value is used to make some of the earlier posters in the grid larger and span multiple rows and columns.

My code is below - can you see why there is extra space around the top and bottom of some of the earlier grid entries, as shown in the screenshot? I have tried playing with the spacing options, but nothing seems to fix the issue

GeometryReader { geometry in
    
    let imageSize = CGFloat(geometry.size.width / 5)
    
    Grid(tracks: 5, spacing: 0) {
        
        ForEach(artists) { artist in
            
            let rankMultiplier: Int = {
                if artist.rank >= 5 { return 3 }
                if artist.rank >= 2 { return 2 }
                else { return 1 }
            }()
            let size = imageSize * CGFloat(rankMultiplier)
            
            SquareImage(artist: artist, size: size)
                .frame(width: size, height: size)
                .gridSpan(column: rankMultiplier, row: rankMultiplier)
            
        }
    }
    .gridContentMode(.scroll)
    .gridPacking(.dense)
}

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions