spacenation · ay42 · Mar 14, 2020 · Mar 14, 2020 · Mar 14, 2020
diff --git a/GridDemo iOS/ModularGrid/ModularGridSettingsView.swift b/GridDemo iOS/ModularGrid/ModularGridSettingsView.swift
@@ -10,7 +10,7 @@ struct ModularGridSettingsView: View {
     @State var columnsMin: CGFloat = 100.0
 
     @State var rowsCount: Int = 3
-    @State var rowsFixed: CGFloat = 150
+    @State var rowsFixed: CGFloat = 100
     @State var rowsMin: CGFloat = 100.0
 
     var body: some View {

diff --git a/GridDemo iOS/ModularGrid/ModularGridView.swift b/GridDemo iOS/ModularGrid/ModularGridView.swift
@@ -4,15 +4,18 @@ import Grid
 struct ModularGridView: View {
     @State var items: [Item] = (0...100).map { Item(number: $0) }
     @State var showSettings: Bool = false
-    @State var style = ModularGridStyle(columns: .min(100), rows: .min(100))
+    @State var style = ModularGridStyle(.vertical, columns: .min(100), rows: .fixed(100))
 
     var body: some View {
-        Grid(items) { item in
-            Card(title: "\(item.number)", color: item.color)
+        ScrollView(style.axes) {
+            Grid(items) { item in
+                Card(title: "\(item.number)", color: item.color)
+            }
+            .padding(8)
+            .gridStyle(
+                self.style
+            )
         }
-        .gridStyle(
-            self.style
-        )
         .navigationBarTitle("Modular Grid", displayMode: .inline)
         .navigationBarItems(
             trailing:

diff --git a/GridDemo iOS/StaggeredGrid/StaggeredGridView.swift b/GridDemo iOS/StaggeredGrid/StaggeredGridView.swift
@@ -3,19 +3,21 @@ import Grid
 
 struct StaggeredGridView: View {
     @State var showSettings: Bool = false
-    @State var style = StaggeredGridStyle(tracks: .min(100), axis: .vertical, spacing: 1, padding: .init(top: 1, leading: 1, bottom: 1, trailing: 1))
+    @State var style = StaggeredGridStyle(.vertical, tracks: .min(100), spacing: 1)
     @State var items: [Int] = (1...69).map { $0 }
 
     var body: some View {
-        Grid(self.items, id: \.self) { index in
-            NavigationLink(destination: ImageDetailView(imageName: "\(index)")) {
-                Image("\(index)")
-                    .renderingMode(.original)
-                    .resizable()
-                    .scaledToFit()
+        ScrollView(style.axes) {
+            Grid(self.items, id: \.self) { index in
+                NavigationLink(destination: ImageDetailView(imageName: "\(index)")) {
+                    Image("\(index)")
+                        .renderingMode(.original)
+                        .resizable()
+                        .scaledToFit()
+                }
             }
+            .animation(.easeInOut)
         }
-        .animation(.easeInOut)
         .navigationBarTitle("Staggered Grid", displayMode: .inline)
         .navigationBarItems(trailing:
             HStack {

diff --git a/GridDemo macOS/ModularGrid/ModularGridView.swift b/GridDemo macOS/ModularGrid/ModularGridView.swift
@@ -5,35 +5,37 @@ struct ModularGridView: View {
     @State var selection: Int = 0
     @State var items: [Item] = (0...100).map { Item(number: $0) }
     @State var showSettings: Bool = false
-    @State var style = ModularGridStyle(columns: .min(200), rows: .min(200))
+    @State var style = ModularGridStyle(columns: .min(100), rows: .fixed(100))
 
     var body: some View {
         VStack(alignment: .trailing) {
             Button(action: { self.showSettings = true }) {
                 Text("Settings")
             }
-            .padding(.trailing, self.style.padding.trailing)
-
-            Grid(items) { item in
-                Card(title: "\(item.number)", color: item.color)
-                    .onTapGesture {
-                        self.selection = item.number
-                    }
-            }
-            .overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
-                RoundedRectangle(cornerRadius: 16)
-                    .strokeBorder(lineWidth: 4)
-                    .foregroundColor(.white)
-                    .frame(
-                        width: preferences[self.selection].width,
-                        height: preferences[self.selection].height
-                    )
-                    .position(
-                        x: preferences[self.selection].midX,
-                        y: preferences[self.selection].midY
-                    )
-                    .animation(.linear)
+            ScrollView(style.axes) {
+                Grid(items) { item in
+                    Card(title: "\(item.number)", color: item.color)
+                        .onTapGesture {
+                            self.selection = item.number
+                        }
+                }
+                .overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
+                    RoundedRectangle(cornerRadius: 16)
+                        .strokeBorder(lineWidth: 4)
+                        .foregroundColor(.white)
+                        .frame(
+                            width: preferences[self.selection].width,
+                            height: preferences[self.selection].height
+                        )
+                        .position(
+                            x: preferences[self.selection].midX,
+                            y: preferences[self.selection].midY
+                        )
+                        .animation(.linear)
+                }
+                .padding(16)
             }
+
         }
         .sheet(isPresented: self.$showSettings) {
             ModularGridSettingsView(style: self.$style)

diff --git a/GridDemo macOS/StaggeredGrid/StaggeredGridView.swift b/GridDemo macOS/StaggeredGrid/StaggeredGridView.swift
@@ -3,21 +3,24 @@ import Grid
 
 struct StaggeredGridView: View {
     @State var showSettings: Bool = false
-    @State var style = StaggeredGridStyle(tracks: 5, axis: .horizontal, spacing: 4)
+    @State var style = StaggeredGridStyle(.horizontal, tracks: 5, spacing: 4)
 
     var body: some View {
         VStack(alignment: .trailing) {
             Button(action: { self.showSettings = true }) {
                 Text("Settings")
             }
-            .padding(.trailing, self.style.padding.trailing)
 
-            Grid(1...69, id: \.self) { index in
-                Image("\(index)")
-                    .resizable()
-                    .scaledToFit()
-                    .clipShape(RoundedRectangle(cornerRadius: 8))
+            ScrollView(style.axes) {
+                Grid(1...69, id: \.self) { index in
+                    Image("\(index)")
+                        .resizable()
+                        .scaledToFit()
+                        .clipShape(RoundedRectangle(cornerRadius: 8))
+                }
+                .padding(8)
             }
+
         }
         .sheet(isPresented: self.$showSettings) {
             StaggeredGridSettingsView(style: self.$style)

diff --git a/GridDemo tvOS/ModularGrid/ModularGridView.swift b/GridDemo tvOS/ModularGrid/ModularGridView.swift
@@ -6,13 +6,15 @@ struct ModularGridView: View {
     @State var items: [Item] = (0...100).map { Item(number: $0) }
 
     var body: some View {
-        Grid(items) { item in
-            Card(title: "\(item.number)", color: item.color)
-                .focusable(true) { focus in
-                    if focus {
-                       self.selection = item.number
+        ScrollView {
+            Grid(items) { item in
+                Card(title: "\(item.number)", color: item.color)
+                    .focusable(true) { focus in
+                        if focus {
+                           self.selection = item.number
+                        }
                     }
-                }
+            }
         }
         .overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
             RoundedRectangle(cornerRadius: 16)
@@ -29,7 +31,7 @@ struct ModularGridView: View {
                 .animation(.linear)
         }
         .gridStyle(
-            ModularGridStyle(columns: .min(300), rows: .min(100))
+            ModularGridStyle(columns: .min(300), rows: .fixed(100))
         )
         .navigationBarTitle("Modular Grid")
     }

diff --git a/GridDemo tvOS/StaggeredGrid/StaggeredGridView.swift b/GridDemo tvOS/StaggeredGrid/StaggeredGridView.swift
@@ -2,6 +2,8 @@ import SwiftUI
 import Grid
 
 struct StaggeredGridView: View {
+    @State var selection: Int = 0
+
     var body: some View {
         Grid(1...69, id: \.self) { index in
             Image("\(index)")

diff --git a/GridDemo watchOS WatchKit Extension/ModularGrid/ModularGridView.swift b/GridDemo watchOS WatchKit Extension/ModularGrid/ModularGridView.swift
@@ -6,27 +6,29 @@ struct ModularGridView: View {
     @State var items: [Item] = (0...100).map { Item(number: $0) }
 
     var body: some View {
-       Grid(items) { item in
-            Rectangle()
-                .foregroundColor(item.color)
-                .cornerRadius(4)
-                .onTapGesture {
-                    self.selection = item.number
-                }
-        }
-        .overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
-            RoundedRectangle(cornerRadius: 4)
-                .strokeBorder(lineWidth: 2)
-                .foregroundColor(.white)
-                .frame(
-                    width: preferences[self.selection].width,
-                    height: preferences[self.selection].height
-                )
-                .position(
-                    x: preferences[self.selection].midX,
-                    y: preferences[self.selection].midY
-                )
-                .animation(.linear)
+        ScrollView {
+            Grid(items) { item in
+                Rectangle()
+                    .foregroundColor(item.color)
+                    .cornerRadius(4)
+                    .onTapGesture {
+                        self.selection = item.number
+                    }
+            }
+            .overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
+                RoundedRectangle(cornerRadius: 4)
+                    .strokeBorder(lineWidth: 2)
+                    .foregroundColor(.white)
+                    .frame(
+                        width: preferences[self.selection].width,
+                        height: preferences[self.selection].height
+                    )
+                    .position(
+                        x: preferences[self.selection].midX,
+                        y: preferences[self.selection].midY
+                    )
+                    .animation(.linear)
+            }
         }
         .gridStyle(
             ModularGridStyle(columns: .min(32), rows: .min(32), spacing: 4)

diff --git a/GridDemo watchOS WatchKit Extension/StaggeredGrid/StaggeredGridView.swift b/GridDemo watchOS WatchKit Extension/StaggeredGrid/StaggeredGridView.swift
@@ -3,10 +3,12 @@ import Grid
 
 struct StaggeredGridView: View {
     var body: some View {
-        Grid(1...69, id: \.self) { index in
-            Image("\(index)")
-                .resizable()
-                .scaledToFit()
+        ScrollView {
+            Grid(1...69, id: \.self) { index in
+                Image("\(index)")
+                    .resizable()
+                    .scaledToFit()
+            }
         }
         .gridStyle(
             StaggeredGridStyle(tracks: 3, spacing: 1)

diff --git a/GridDemo.xcodeproj/project.pbxproj b/GridDemo.xcodeproj/project.pbxproj
@@ -832,6 +832,7 @@
 				COPY_PHASE_STRIP = NO;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_ASSET_PATHS = "GridDemo\\ iOS/Preview\\ Content/Preview\\ Assets.xcassets";
+				DEVELOPMENT_TEAM = "";
 				ENABLE_PREVIEWS = YES;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
@@ -905,6 +906,7 @@
 				COPY_PHASE_STRIP = NO;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_ASSET_PATHS = "GridDemo\\ iOS/Preview\\ Content/Preview\\ Assets.xcassets";
+				DEVELOPMENT_TEAM = "";
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_PREVIEWS = YES;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;

diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@ SwiftUI Grid view layout with custom styles.
 ## Features
 - ZStack based layout
 - Vertical and horizontal scrolling
+- Supports grid of grids, each with it's own style
 - Supports all apple platforms
 - Custom styles (ModularGridStyle, StaggeredGridStyle)
 - SwiftUI code patterns (StyleStructs, EnvironmentValues, ViewBuilder)
@@ -21,12 +22,14 @@ Open `GridDemo.xcodeproj` for more examples for iOS, macOS, watchOS and tvOS
 </center>
 
 ```swift
-Grid(colors) {
-    Rectangle()
-        .foregroundColor($0)
+ScrollView {
+    Grid(colors) {
+        Rectangle()
+            .foregroundColor($0)
+    }
 }
 .gridStyle(
-    ModularGridStyle(columns: .min(100), rows: .min(100))
+    ModularGridStyle(columns: .min(100), rows: .fixed(100))
 )
 ```
 
@@ -37,13 +40,15 @@ Grid(colors) {
 </center>
 
 ```swift
-Grid(1...69, id: \.self) { index in
-    Image("\(index)")
-        .resizable()
-        .scaledToFit()
+ScrollView {
+    Grid(1...69, id: \.self) { index in
+        Image("\(index)")
+            .resizable()
+            .scaledToFit()
+    }
 }
 .gridStyle(
-    StaggeredGridStyle(tracks: 8, axis: .horizontal, spacing: 4)
+    StaggeredGridStyle(.horizontal, tracks: 8, spacing: 4)
 )
 ```
 
@@ -76,7 +81,7 @@ StaggeredGridStyle(tracks: .fixed(100))
 ### Min
 Autolayout respecting a min item width or height.
 ```swift
-ModularGridStyle(columns: .min(100), rows: .min(100))
+ModularGridStyle(columns: .min(100), rows: .fixed(100))
 StaggeredGridStyle(tracks: .min(100))
 ```
 
@@ -87,26 +92,28 @@ 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(GridItemBoundsPreferencesKey.self) { preferences in
-            RoundedRectangle(cornerRadius: 16)
-                .strokeBorder(lineWidth: 4)
-                .foregroundColor(.white)
-                .frame(
-                    width: preferences[self.selection].width,
-                    height: preferences[self.selection].height
-                )
-                .position(
-                    x: preferences[self.selection].midX,
-                    y: preferences[self.selection].midY
-                )
-                .animation(.linear)
+        ScrollView {
+            Grid(0..<100) { number in
+                Card(title: "\(number)")
+                    .onTapGesture {
+                        self.selection = number
+                    }
+            }
+            .padding()
+            .overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
+                RoundedRectangle(cornerRadius: 16)
+                    .strokeBorder(lineWidth: 4)
+                    .foregroundColor(.white)
+                    .frame(
+                        width: preferences[self.selection].width,
+                        height: preferences[self.selection].height
+                    )
+                    .position(
+                        x: preferences[self.selection].midX,
+                        y: preferences[self.selection].midY
+                    )
+                    .animation(.linear)
+            }
         }
     }
 }
@@ -120,7 +127,7 @@ struct CardsView: View {
 - Xcode 11.0+
 
 ## Roadmap
-- Item rearranging
+- Items span
 - 'CSS Grid'-like features
 
 ## Code Contributions