{"id":16235346,"url":"https://github.com/pietropizzi/gridstack","last_synced_at":"2025-04-04T17:07:59.960Z","repository":{"id":36802585,"uuid":"195657142","full_name":"pietropizzi/GridStack","owner":"pietropizzi","description":"A flexible grid layout view for SwiftUI","archived":false,"fork":false,"pushed_at":"2022-02-21T13:56:51.000Z","size":187,"stargazers_count":657,"open_issues_count":4,"forks_count":34,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-11T13:25:08.402Z","etag":null,"topics":["grid","ios","macos","swift","swiftui","tvos","watchos"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pietropizzi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-07T13:53:29.000Z","updated_at":"2024-09-29T02:23:16.000Z","dependencies_parsed_at":"2022-09-14T13:51:11.402Z","dependency_job_id":null,"html_url":"https://github.com/pietropizzi/GridStack","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pietropizzi%2FGridStack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pietropizzi%2FGridStack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pietropizzi%2FGridStack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pietropizzi%2FGridStack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pietropizzi","download_url":"https://codeload.github.com/pietropizzi/GridStack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217184,"owners_count":20903009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid","ios","macos","swift","swiftui","tvos","watchos"],"created_at":"2024-10-10T13:25:39.152Z","updated_at":"2025-04-04T17:07:59.941Z","avatar_url":"https://github.com/pietropizzi.png","language":"Swift","readme":"# 📱GridStack\n\nA flexible grid layout view for SwiftUI.\n\n## WWDC20 Update\n\nApple  released [`LazyVGrid`](https://developer.apple.com/documentation/swiftui/lazyvgrid) and [`LazyHGrid`](https://developer.apple.com/documentation/swiftui/lazyhgrid) at WWDC20.\n\nIf you are fine to only support **i(Pad)OS 14, macOS 11, tvOS 14, watchOS 7** respectively those `^--` are definitely the way to go.\n\nIf you want to support **i(Pad)OS 13, macOS 10.15, tvOS 13, watchOS 6** keep on reading.\n\n---\n\n![Release](https://img.shields.io/github/v/release/pietropizzi/GridStack?color=blue\u0026sort=semver)\n![Build \u0026 Test](https://github.com/pietropizzi/GridStack/workflows/Build%20\u0026%20Test/badge.svg)\n\n**📱 iOS 13+,**\n**💻 macOS 10.15+,**\n**📺 tvOS 13+,**\n**⌚ watchOS 6+**\n\nSimply pass the minimum width the grid cells should have and the spacing between them and it will adjust depending on the available width.\n\nSo writing this:\n\n![Code](https://user-images.githubusercontent.com/410305/74313631-5670ce80-4d74-11ea-9814-4e06e8463372.png)\n\nwill give you you this:\n\n\u003cimg width=\"1378\" alt=\"Screenshot 2019-07-14 at 14 07 02\" src=\"https://user-images.githubusercontent.com/410305/61183368-de58f380-a640-11e9-9025-1c174c040c6e.png\"\u003e\n\n\nIt also adjusts correctly when the device is rotated:\n\n![rotation](https://user-images.githubusercontent.com/410305/61183421-6dfea200-a641-11e9-99c8-3f24cc35d1d8.gif)\n\n## 🗺 Usage Overview\n\nThink of the grid in the way of what is the **minimum width** you want your cells to be. That way it is easy to adjust to any available space. The only other size you need to provide is the **spacing** between the cells.\n\nTo actually create the grid we need to know the **numbers of items**. Then the **content** view builder will be called with each **index** and the **cellWidth** that you can then pass to the frame of whatever you want to display inside.\n\n## 👕 Sizing your views inside the cells\n\nThe grid will wrap each item you provide with in a view that gets the **cellWidth** set as **width**. No height constraint is put on the cell. That is so that you can size your content as flexible as possible. Here are just a couple of examples what you can do.\n\n### Height defined by content\n\n```swift\nGridStack(...) { index, cellWidth in\n    Text(\"\\(index)\")\n        // Don't pass any height to the frame to let it be defined by it's content\n        .frame(width: cellWidth)\n}\n```\n\n### Square items\n\n```swift\nGridStack(...) { index, cellWidth in\n    Text(\"\\(index)\")\n        // Pass the cellWidth as width and height to the frame to make a square\n        .frame(width: cellWidth, height: cellWidth)\n}\n```\n\n### Aspect Ratio items\n\n```swift\nGridStack(...) { index, cellWidth in\n    Text(\"\\(index)\")\n        // Pass the cellWidth as width and a portion of it as height to get a certain aspect ratio\n        .frame(width: cellWidth, height: cellWidth * 0.75)\n}\n```\n\n## ✍️ Signature\n\n```swift\nGridStack(\n    minCellWidth: Length,\n    spacing: Length,\n    numItems: Int,\n    alignment: HorizontalAlignment = .leading,\n    content: (index: Int, cellWidth: CGFloat) -\u003e Void\n)\n```\n\n## 📝 Mentions\n\nI created `GridStack` by taking ideas from [FlowStack](https://github.com/johnsusek/FlowStack) by [John Susek](https://github.com/johnsusek).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpietropizzi%2Fgridstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpietropizzi%2Fgridstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpietropizzi%2Fgridstack/lists"}