Skip to content

Cell height incorrect when using gridSpan #45

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions