SwiftUI Grid view layout with custom styles.
- ZStack based layout
- Supports all apple platforms
- Custom Styles (AutoColumns, FixedColumns, SingleColumn)
- SwiftUI code patterns (StyleStructs, EnvironmentValues)
- Active development for production apps
Open /Examples/GridExamples.xcodeproj for more examples for iOS, macOS, watchOS and tvOS
Grid(0...100) { _ in Rectangle() .foregroundColor(.blue) }Grid { ForEach(items, id: \.self) { item in Rectangle() .foregroundColor(item.color) } } .padding(.horizontal, 8) .gridStyle( AutoColumnsGridStyle(minItemWidth: 160, itemHeight: 80, hSpacing: 8, vSpacing: 8) )Grid(0...100) { number in Card(title: "\(number)") } .gridStyle( FixedColumnsGridStyle(columns: 3, itemHeight: 160) )Grid(0...100) { number in Card(title: "\(number)") } .gridStyle( SingleColumnGridStyle(itemHeight: 160) )
- iOS 13+
- Mac Catalyst 13.0+
- macOS 10.15+
- watchOS 6+
- Xcode 11.0+
Get item size and position with preferences
struct CardsView: View { @State var selection: Int = 0 var body: some View { Grid(0..<100) { number in Card(title: "\(number)") .onTapGesture { self.selection = number } } .padding() .overlayPreferenceValue(GridItemPreferences.Key.self) { preferences in GeometryReader { geometry in RoundedRectangle(cornerRadius: 16) .strokeBorder(lineWidth: 4) .foregroundColor(.white) .frame( width: geometry[preferences[self.selection].bounds].size.width, height: geometry[preferences[self.selection].bounds].size.height ) .offset( x: geometry[preferences[self.selection].bounds].minX, y: geometry[preferences[self.selection].bounds].minY ) .animation(.spring()) } } } }Stable version will be released as soon as XCode 11 GM becomes available. We will strictly follow semantic versioning moving forward.
- Items selection and rearranging
- 'CSS Grid'-like features
Feel free to contribute via fork/pull request to master branch. If you want to request a feature or report a bug please start a new issue.