SwiftUI Masonry

Control how subviews are placed within the masonry grid using the placementMode parameter with a MasonryPlacementMode value:

• .fill: (Default) Places each subview in the column or row with the most available space.
• .order: Places each subview according to its order in the view tree.

VMasonry(columns: 2, spacing: 12, placementMode: .fill) {
    // Masonry content
}

Install the library using Swift Package Manager and import the module to begin using the masonry layouts in your SwiftUI views.

import SwiftUIMasonry

Use the .masonryColumnSpan() or .masonryRowSpan() view modifiers to allow a subview to occupy more than one column or row. By default, subviews span 1 column/row.

These modifiers accept either an Int or a MasonryColumnCount/MasonryRowCount enum with two cases:

• .fixed(Int): A constant number of columns/rows.
• .adaptive(minWidth: CGFloat) / .adaptive(minHeight: CGFloat): A variable number based on constraints.

VMasonry(columns: .adaptive(minWidth: 128)) {
    // Other masonry content

    MyCellView()
        .masonryColumnSpan(.fixed(2))
    
    // Other masonry content
}

You can control the distance between adjacent subviews using several parameters:

• spacing: A single value for uniform spacing.
• horizontalSpacing: Specific spacing for horizontal gaps.
• verticalSpacing: Specific spacing for vertical gaps.

VMasonry(columns: 2, horizontalSpacing: 8, verticalSpacing: 12, placementMode: .order) {
    // Masonry content
}

Use HMasonry to arrange subviews in a horizontal Pinterest-like grid. It is typically wrapped in a horizontal ScrollView.

Parameters:

• rows: The number of rows in the masonry.
• spacing: The distance between adjacent subviews (use nil for default distance).
• placementMode: The placement mode for subviews in this masonry.

ScrollView(.horizontal) {
    HMasonry(rows: 2) {
        // Masonry content
    }
}

Use VMasonry to arrange subviews in a vertical Pinterest-like grid. It is typically wrapped in a vertical ScrollView.

Parameters:

• columns: The number of columns in the masonry.
• spacing: The distance between adjacent subviews (use nil for default distance).
• placementMode: The placement mode for subviews.

ScrollView(.vertical) {
    VMasonry(columns: 2) {
        // Masonry content
    }
}