Bento Grid
A dense-packing bento layout whose tiles spring in with a blur, scale and rise stagger. Each tile presses in with depth and ships with live mini widgets: flowing chart, ring, pulse dot, bars and counters.
Luiz Mello- grid
- layout
- widget
snippet.swift460 lines
8 files • Scroll to see all →
/// A column-based bento layout. Each child declares how many columns and/// rows it spans with `.bentoSpan(columns:rows:)`, and tiles are packed/// top-to-bottom into the first gap that fits (dense packing).public struct BentoGridLayout: Layout { public var columns: Int public var spacing: CGFloat public var rowHeight: CGFloat public init(columns: Int = 4, spacing: CGFloat = 12, rowHeight: CGFloat = 86) { self.columns = max(1, columns) self.spacing = spacing self.rowHeight = rowHeight } public func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize { let width = proposal.width ?? 360 let frames = frames(for: subviews, width: width) return CGSize(width: width, height: frames.map(\.maxY).max() ?? 0) }// ... (click "Show full code" to see more)Viewing: BentoLayout.swift•1 of 8