I am using two Grids inside another grid. Seems OK, except when I try to use rowspan inside of one of the inner grids. Here is general layout:

Here is the code:

import SwiftUI
import ExyteGrid

struct GridIssue1View: View
{
    
    var body: some View
    {
        let dials_view = Color.purple

        Grid(tracks: [
            .fr(0.5), // dials
            .fr(0.5), // grid with times
        ], flow:.columns, spacing: 0)
        {
            // Grid2
            Grid(tracks: [
                .fr(1), // purple
                .fit, // label
                .fit, // value
            ], spacing: 3)
            {
                dials_view
                    .aspectRatio(1, contentMode: .fit)
                    .gridStart(column: 0, row:0)
//                    .gridSpan(row: 3)
                
                Text("G2.1")
                    .gridStart(column: 1, row:1)
                Text("A")
                    .gridStart(column: 2, row:1)

                Text("G2.2")
                    .gridStart(column: 1, row:1)
                Text("B")
                    .gridStart(column: 2, row:1)
                
                Text("G2.3")
                    .gridStart(column: 1, row:2)
                Text("C")
                    .gridStart(column: 2, row:2)
             }
            .background(Color.yellow)

            // Grid3
            Grid(tracks: [
                .fit, // +1
                .fit, // rise
                .fit, // 0,3,6,9
                .fit, // set
                .fit // +1
            ], spacing: 3)
            {
                GridGroup
                {
                    Text("+")
                    Text("1")
                    Text(" 0°")
                    Text("2")
                    Text("+")

                }

                GridGroup
                {
                    Text("+")
                    Text("3")
                    Text(" 0°")
                    Text("4")
                    Text("+")
                }

                GridGroup
                {
                    Text("+")
                    Text("5")
                    Text(" 0°")
                    Text("6")
                    Text("+")
                }
                
                GridGroup
                {
                    Text("+")
                    Text("7")
                    Text(" 0°")
                    Text("8")
                    Text("+")
                }
            }
        }
        .background(Color.gray)
        .padding(8)

    }
}

struct GridIssue1View_Previews: PreviewProvider {
    static var previews: some View {
        GridIssue1View()
    }
}

With gridSpan commented out, the purple block is OK and just taking up one row since I don't have the rowspan active:

But when I add the rowspan, the layout in the outer grid shifts to being 2x1:

I would have expected:

This just may not be supported but I wanted to check in. Thanks so much.

Does this grid support drag and drop reordering? Is there an example?

i wasn't able to install through CocoaPods on my M1 MacBook
i suggest using SPM instead of CocoaPods to install the framework
so it'll work on my computer as well :)

I have a problem where the elements of the grid are overlapping.
My code is:

var body: some View {
     ScrollView {
            VStack(alignment: .leading) {
                Group {
                    Text("Letters en woorden")
                        .font(.title)
                    Grid(tracks: 3) {
                        Text("_eererer_")
                        Text("_eererer__")
                        Text("_eererer_")
                        Text("_eererer_")
                        Text("_eererer_")
                        Text("_eererer_")
                    }
                // ...
                }
            }.padding(.bottom)
     }.navigationTitle("Morse")
       .padding(.horizontal)
}

This is how my view look

Awesome framework! Please, consider looking into the following issue:

I'm trying to embed Grid into the following setup:

import ExyteGrid
import SwiftUI

struct Test: View {
  var body: some View {
    NavigationView {
      Grid(tracks: 3) {
        Color(.blue)
        Color(.purple)
        Color(.red)
        Color(.cyan)
        Color(.green)
        Color(.orange)
      }
    }
  }
}

struct Test_Previews: PreviewProvider {
  static var previews: some View {
    Test()
  }
}

The result:

Xcode Version 12.0 (12A7209)
ExyteGrid (0.1.0)
iOS 14.0

If the grid view is conditionally rendered, we have to manually assign its height.

Here is code snippets

// Use Grid in child view

struct RaceRunnerForm: View {
    @State private var isShownFullForm = false
    var body: some View {
        VStack(alignment: .leading, spacing: 5) {
            Text("Comments").bold()
            Divider()
            
            Grid(0..<formItemCount, tracks: 2, spacing: 10) { index in
                HStack(alignment:.center) {
                    Text("\(self.formLabelArray[index])")
                    Spacer()
                    Text(self.formDataArray[index])
                }
                .frame(height: 37)
            }.padding(.leading, -10).padding(.trailing, -10)
             .frame(height: 300) // have to assign height explictly
        }
    }
}

// Call from the parent view

@State private var isExpanded = false  // `Conditionally rendering`
var body: some View {
        VStack {
            HStack {
                VStack(spacing: 10) {
                VStack(alignment: .leading) {
                    Text(entrant.name).bold()
                }
            if isExpanded { 
                RaceRunnerForm()
            }
        }
    }

Hello, I use a @State variable to control display Grid, like this:

if(unit == "w"){
    Grid(tracks: 3) {
        ForEach(weekSelectArr.indices){item in
            Toggle(isOn: self.$weekSelectArr[item]) {
                Text(weekdays[item])
                    .frame(height:50)
            }.toggleStyle(GridToggleStyle())
        }
    }.frame(height:200)
}

When the view appear, it shows like this: only show one item.

When I click the item, it come back into grid:

Their parent view is a Form->Section.

I am still a SwiftUI newbie for sure, but I just could not figure out how to easily align cell contents, to change from centered.

For example, in below I would like "A" to right align in the cell:

struct GridIssue2View: View {
    var body: some View {
        Grid(tracks: [
            .fit, // label
            .fit, // value
        ], spacing: 5)
        {
            Text("A")
            Text("B")
            Text("CCCCC")
            Text("D")
        }
        .frame(width: 100, height: 50)
        .border(Color.blue, width: 1)
    }
}

I tried swapping out Text("A") with:

            HStack
            {
                Spacer()
                Text("A")
            }

Thinking that might push the A over. But it yielded:

Thank you for any possible help!

Hi, 1.4.0 does build and 1.4.2 - doesn't - though didn't check 1.4.1
It fails to build as a project dependency and as a standalone project
Please see build log.
Environment - Xcode 13.4.1, macOS 12.4
Build ExyteGrid_2023-01-23T02-08-12.txt

This one is pretty odd. This simple WidgetKit example:

import SwiftUI
import ExyteGrid
import WidgetKit

struct GridIssue2View: View {
    var body: some View {
        Grid(tracks: [
            .fit, // label
            .fit, // value
        ], spacing: 3)
        {
            Text("A")
            Text("B")
            Text("C")
            Text("D")
        }
    }
}

struct GridIssue2View_Previews: PreviewProvider {
    static var previews: some View
    {
        GridIssue2View()
            .previewContext(WidgetPreviewContext(family: .systemSmall))
    }
}

Does not do column/row layout in preview mode:

But when placed in view for real widget, it renders OK in preview. Also I could place within ZStack to fix:

struct GridIssue2View: View {
    var body: some View {
        ZStack
        {
            Grid(tracks: [
                .fit, // label
                .fit, // value
            ], spacing: 3)
            {
                Text("A")
                Text("B")
                Text("C")
                Text("D")
            }
        }
    }
}

Similar preview example under iOS is fine. Perhaps related to ScrollView change?

iOS:

import SwiftUI
import ExyteGrid

struct GridIssue2View: View {
    var body: some View {
        Grid(tracks: [
            .fit, // label
            .fit, // value
        ], spacing: 3)
        {
            Text("A")
            Text("B")
            Text("C")
            Text("D")
        }
    }
}

struct GridIssue2View_Previews: PreviewProvider {
    static var previews: some View {
        GridIssue2View()
    }
}

It would be great if Grid could target support for macOS. It seems to support Catalyst, but that is not good enough for a native Mac app.

I took a stab at it and was able to add macOS support pretty easily. Unfortunately Xcode messes with so many project settings (and I don't know your preferred setup/naming) so it would probably be easier if you just addressed this on your end.

Steps to add Mac support:

1. Add macOS Framework target
2. Add all source files
3. Mac's dont have didReceiveMemoryWarningNotification. Find another solution for the layout cache.
4. Update Package.swift to add platform
5. Address some minor issues with examples using UIColor etc.
6. Done!

When attempting to render a scrollable grid in a navigation view with a navigation bar item, I get the following error: " precondition failure: invalid input index: 2". I've been able to run it successfully without the navigation bar item and still with a navigation bar title, but as soon as I add the item back in it fails.

I can render the grid view without being scrollable and with the navigation bar item there and it works as expected.

Here is my view with the grid:

struct ListView: View {
    
    private let elements = ElementsModel()
    @State private var showSheet = false
    
    var body: some View {
        NavigationView {
            Grid(elements.elements, tracks: 3) {element in
                SquareView(element: element, showElementName: true)
            }
            .gridContentMode(.scroll)
            .edgesIgnoringSafeArea(.all)
            .navigationBarTitle("🧪 Elements")
            .navigationBarItems(trailing:
                Text("Test")
            )
        }
    }
}

Here is the SquareView that is inside the body:

struct SquareView: View {
    
    let element: Element
    let showElementName: Bool
    
    var body: some View {
        VStack {
            Text("\(element.number)")
                .frame(maxWidth: .infinity, alignment: .leading)
            
            Text(element.symbol)
                .bold()
                .font(.system(size: 50))
            
            Group {
                if showElementName {
                    Text(String(element.name))
                        .bold()
                } else {
                    if element.atomicMass != nil {
                        Text(String(element.atomicMass!))
                    }
                }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .modifier(OneLineText())
        .aspectRatio(1, contentMode: .fit)
        .foregroundColor(.white)
        .padding(5)
        .background(elementColor[element.category])
    }
}

Please let me know if there are any debugging tasks I can do to provide more information

Hello, I have a question about the layout. When item count is zero grid align to center. How to align it to leading?
image:

when count is not zero it is like this:

Hi,
Adding view(ex: button ) with a if statement of a @State boolean value is not working inside of Grid with forEach. What can I do about it? Any idea?

When using a resizable Image with .aspectRatio(contentMode: .fill), the image may not be correctly displayed.

Here's a code example to reproduce the issue:

Grid(tracks: 3) {
    ForEach(0 ..< 7) { i in
        Image("ExampleImage")
        .resizable()
        .aspectRatio(contentMode: .fill)
    }
}
.gridContentMode(.scroll)

With ForEach(0 ..< 1), the image fills the whole width of the grid container (instead of just one column).

The more rows are added, the more zoomed in the images become.

With 10 rows, only a single pixel of the image is visible, filling the entire screen.

In this nested grid example, the parent layout is not expected:

var body: some View {
        Grid(tracks: [
            .fit, // label
            .fit, // value
        ], spacing: 5)
        {
            Text("A").gridAlignment(.trailing)
            Text("B").gridAlignment(.leading)
            Text("CCCCC").gridAlignment(.trailing)
            Text("D").gridAlignment(.leading)
            Text("Grid->").gridAlignment(.trailing)
            Grid(tracks: [
                .fit, // label
                .fit, // value
            ], spacing: 3) {
                Text("W").gridAlignment(.leading)
                Text("X").gridAlignment(.trailing)
                Text("YYYY").gridAlignment(.leading)
                Text("ZZZZ").gridAlignment(.trailing)
            }
            .border(Color.red, width: 1)
        }
        .border(Color.blue, width: 1)
    }

Hi team,
Di you have any examples of implementing a timetable?
Thanks

Is it possible to use the grid in scrollview with other views?

Hello. I using Grid for some iOS14 widgets. I am running into this:

SwiftUI is throwing up a warning per https://stackoverflow.com/questions/63135404/why-do-some-views-appear-as-a-red-no-entry-sign-in-widgets. The Grid's ScrollView was the issue.

I believe ScrollView would only be needed in .gridContentMode(.scroll) mode. As a quick hack I commented out the ScrollView in Grid and all seems good.

I am fairly new to both Swift and SwiftUI as assume you would have a much more elegant real fix than I could provide. I won't need scrollable maybe ever for my project. But I could take a crack at a "real" fix.

Love the Grid! Thank you!!

My company works with ipads 4th gen :(
latest ios is 10.3 :(
Is there a way to support ios 10?

Is there a way to show gridlines? Like if you wanted to build a spreadsheet control with TextFields inside the grid.

Issue

Scaling a view within the Grid causes incorrect overlay.

Description

I attempted to manipulate the zIndex by wrapping my Grid Item View in a ZStack and changing the zIndex whenever that particular view scaled.

However, it does not appear to have any effect.

Details

Here is a sample code snippet of my Grid implementation:

    var body: some View {
        Grid(tracks: layout.tracks) {
            ForEach(viewModel.items, id: \.self) { item in
                ZStack {
                    LayoutItem(item, action: { action in
                        viewModel.handle(action, for: item)
                    })
                }
                .zIndex(item.zIndex)
                .gridSpan(column: item.type.column,
                          row: item.type.row)
            }
        }
        .gesture(drag)
        .coordinateSpace(name: GridLayout.NAME_SPACE)
    }

Here is a code snippet of my toggle scale logic

    public func handle(drag location: CGPoint?) {
        for var item in items {
            var inBounds = false
            var scale: GridLayoutItemScale = .normal
            var zIndex: Double = 0
            if let location = location {
                inBounds = item.bounds.contains(location)
                scale = inBounds ? .large : .normal
                zIndex = inBounds ? 1 : 0
            }
            item.scale = scale
            item.zIndex = zIndex
            setItem(item)
        }
    }

Demo

Conclusion

I looked through the documentation and wasn't able to find anything specific to zIndex manipulation.

Is it possible to alter the zIndex for Grid Items within the Grid to avoid bottom overlay?

If not, it would be a great addition to this package! I've been using it a lot and it is FANTASTIC!

Awesome library guys!

Would it be possible to use the Grid to make a TextEditor with multiple columns, like on Apple Pages for example?

I tried bellow, but have no idea how to make this work...

import SwiftUI
import ExyteGrid


struct ContentView: View {

    let inputText = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
    
    var body: some View {

        Grid(tracks: 2) {
          Text(inputText)
        }
    }
}

Hi,
I saw this post posted in October 2021 regarding issues with nesting the grids inside scroll views. And the answer was that scrollviews were not supported.

Is there any update on this or projected update release dates?

Thanks!

How do I get my cells to align .topLeading? I've tried all permutations of .gridCommonItemsAlignment(.topLeading) and all the other methods on Grid that supports alignment.

I can't get the cards in the demo to align to the top. You can see the one on the middle right is always centred vertically. I'd like it to be .topLeading aligned.

I have a macOS app that I'm adding Grid to, but when I pass in new data, the grid is not refreshed.

However, if I switch to using LazyVGrid, it does refresh. So I know the data is getting to the SwiftUI view. I'm integrating Grid using an NSHostingController and I'm monitoring changes to my object using @ObjectBinding. Anything outside the Grid will update when I change objects, but anything within the Grid does not.

Think of a master/detail view. The master is an AppKit NSTableView that shows a list of records. The detail view is my SwiftUI view that's using Grid to display a list of fields on screen. But when I switch records, the SwiftUI view's Grid never refreshes.

Like in the Fitbit app it would be nice to make them re-adjustable - going to use your library for showing dynamic data so would be an appreciated feature if you could move around the "block" on the Grid.

Great library, thanks!

When the grid is placed inside a scrollview, the grid just disappears.

import SwiftUI
import ExyteGrid

struct ContentView: View {
    
    var body: some View {
        
        ScrollView {
            Grid(array, id: \.id, tracks: [.fit, .fit], spacing: 20) { user in
                VStack {
                    Text(user.name)
                        .font(.largeTitle)
                    
                    Text(user.image)
                        .font(.largeTitle)
                        .background(Color.orange)
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct User: Identifiable {
    let id = UUID().uuidString
    let name: String
    let image: String
}

var array = [
    User(name: "Hello", image: "😀"),
    User(name: "No one here", image: "😆"),
    User(name: "Hello", image: "😀"),
    User(name: "No one here", image: "😆"),
    User(name: "Hello", image: "😀"),
    User(name: "No one here", image: "😆"),
    User(name: "Hello", image: "😀"),
    User(name: "No one here", image: "😆"),
    User(name: "Hello", image: "😀"),
    User(name: "No one here", image: "😆"),
]

Whenever a Grid is placed within a navigation view, the app crashes. As soon as the navigation view is removed it works as expected.

I would love to support development financially.

I would love to use your library because it has many great features. Unfortunately I couldn't make the grid to look like the picture.

What I need:

1. a multi-column grid containing about twenty different view
2. each view has a different height, the height depends on the content
3. each view has a specific column and column order
4. the columns are of different lengths

Can you advise me how to do this?

Thanks, Michal Kus

Here is my code:

Grid(store.state.categories, id: \.id, tracks: 2) { category in
      SectionView( text: category.name)
}.gridContentMode(.scroll)

When I do it with List there is no issue, no lags. Would be happy if you can let me know if there is something that I missed.

Thanks

Quite common with SwiftUI projects.

Good job 👍

Hi,

I was wondering if it is possible to change the column span of a cell dynamically as you change the flow in the documentation: https://github.com/exyte/Grid#columns?