// Add an album cover from the first column to 5
// (please note we are using just a plain Int instead of the Position object below)
// To make the album square we have used a custom closure with SnapKit's own `ConstraintMaker` (make) at the end of the method
gridView.add(subview: albumCover, space: 5) { make in
    make.height.equalTo(self.albumCover.snp.width)
}

// Add album title label, stretching (12px padding) from the album cover image to the end of the grid view
gridView.add(subview: albumTitleLabel, from: .relation(albumCover, margin: 12), space: .last)

// Reusable position for the remaining two album labels. iPhones in portrait will take the rest of the screen,
// on bigger devices or in landscape mode these labels finish two columns from the end of the grid view (.reversed(2)). 
let subtitlesLast: Position = .custom { traitCollection in
    return self.gridView.bounds.size.width <= 414 ? .last : .reversed(2)
}

// Place artist label below the album title with margin of 2px, match the left position of the album title label
// and the previously calculated `subtitlesLast` for end position
gridView.add(subview: artistLabel, .below(albumTitleLabel, margin: 2), from: .match(albumTitleLabel), space: subtitlesLast)

// Place year released label under the artist name label, rest is same as above
gridView.add(subview: yearLabel, .below(artistLabel, margin: 2), from: .match(artistLabel), space: subtitlesLast)

// Place a purchase button next to the artist and year label on bigger screens and under on smaller ones (iPhone in portrait etc)
// For the start position you either start 12px from the album on smaller screens or second column from the right on bigger ones
// (note you can also use `UITraitCollection` in both cases if needed)
gridView.add(subview: purchaseButton, .custom({ traitCollection in
    if self.gridView.bounds.size.width <= 414 {
        return .below(self.yearLabel, margin: 3)
    } else {
        return .match(self.artistLabel)
    }
}), from: .custom({ _ in
    if self.gridView.bounds.size.width <= 414 {
        return .relation(self.albumCover, margin: 12)
    } else {
        return .relation(self.artistLabel, margin: 6)
    }
}), space: .last) { make in
    make.height.equalTo(28)
}

// Place the star rating label above the separator. The initial position is not set and will be dynamic, the whole thing will stretch to the end
gridView.add(subview: ratingLabel, .above(separator, margin: 12), from: .dynamic, space: .last) { make in
    make.height.equalTo(28)
}

// Add a 1px separator below any of the components that could reach it and space it 12px from the lowest one
gridView.add(subview: separator, .below([albumCover, yearLabel, purchaseButton], margin: 12)) { make in
    make.height.equalTo(1)
}

// Add the long description copy which takes the full width and is placed below the separator
gridView.add(subview: aboutLabel, .below(separator, margin: 12))

// Set number of columns
gridView.config.numberOfColumns = 24

gridView.config.padding = .full(top: 6, left: 12, right: 12)

gridView.config.automaticVerticalSizing = true

/// None
.none

/// Top
.top(CGFloat)

/// Left
.left(CGFloat)

/// Right
.right(CGFloat)

/// Sides (left, right)
.horizontal(left: CGFloat, right: CGFloat)

/// Full (top, left, right, bottom)
.full(top: CGFloat, left: CGFloat, right: CGFloat)

/// Top of the grid
.toTop

/// Exact value from the top
.exactly(fromTop: CGFloat)

/// Match top of another view
.match(UIView, margin: CGFloat = 0)

/// Maintains a position under a set of elements
.below([UIView], margin: CGFloat = 0)

/// Below another view (view, margin)
.below(UIView, margin: CGFloat = 0)

/// Above another view (view, margin)
.above(UIView, margin: CGFloat = 0)

/// Custom vertical position for a given size class (trait collection, not available on macOS)
.custom(((_ traitCollection: UITraitCollection) -> Vertical))

/// First column
.first

/// Specific column on the grid
.col(Int)

/// Last column on a grid view
.last

/// N-th column from the end
.reversed(Int)

/// Up to another element
.relation(UIView, margin: CGFloat = 0)

/// Match position of another view
.match(UIView, margin: CGFloat = 0)

/// Dynamic position
.dynamic

/// Custom position for a given size class (trait collection, not available on macOS)
.custom(((_ traitCollection: UITraitCollection) -> Position))

class MyViewController: GridViewController { }

// Display grid
gridView.config.displayGrid = true