{"id":13995333,"url":"https://github.com/eleev/grid-compositional-layout","last_synced_at":"2025-05-12T05:30:56.406Z","repository":{"id":83808515,"uuid":"274713467","full_name":"eleev/grid-compositional-layout","owner":"eleev","description":"🧲 Grid Compositional Layout is a SwiftUI 2.0 view that lays out the supplied views in a grid. Easily configurable and lazily retained [Swift 5.3, iOS 14.0+, iPadOS 14.0+, macOS 11.0(10.16)+]","archived":false,"fork":false,"pushed_at":"2020-06-29T15:03:24.000Z","size":44773,"stargazers_count":52,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T00:51:08.900Z","etag":null,"topics":["apple","gridview","ios","ipados","layout","lazyhgrid","lazyvgrid","macos","swift","swift-package","swiftpm","swiftui"],"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/eleev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-06-24T16:13:01.000Z","updated_at":"2025-03-04T02:58:58.000Z","dependencies_parsed_at":"2023-06-03T03:45:49.797Z","dependency_job_id":null,"html_url":"https://github.com/eleev/grid-compositional-layout","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fgrid-compositional-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fgrid-compositional-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fgrid-compositional-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fgrid-compositional-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eleev","download_url":"https://codeload.github.com/eleev/grid-compositional-layout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253681895,"owners_count":21946826,"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":["apple","gridview","ios","ipados","layout","lazyhgrid","lazyvgrid","macos","swift","swift-package","swiftpm","swiftui"],"created_at":"2024-08-09T14:03:21.203Z","updated_at":"2025-05-12T05:30:51.374Z","avatar_url":"https://github.com/eleev.png","language":"Swift","funding_links":[],"categories":["Swift"],"sub_categories":[],"readme":"# grid-compositional-layout [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\n\n[![Platform](https://img.shields.io/badge/Platforms-iOS/iPadOS/macOS-yellow.svg)]()\n[![PrimaryFramework](https://img.shields.io/badge/Framework-SwiftUI-red.svg)]()\n[![Language](https://img.shields.io/badge/Language-Swift_5.3-orange.svg)]()\n[![CustomLayouts](https://img.shields.io/badge/Custom_Demo_Layouts-9-green.svg)]()\n[![DependencyManagement](https://img.shields.io/badge/Swift_PM-Supported-pink.svg)]()\n[![License](https://img.shields.io/badge/License-MIT-blue.svg)]()\n\n**Last Update: 27/June/2020.**\n\n![](logo.jpg)\n\n### If you like the project, please give it a star ⭐ It will show the creator your appreciation and help others to discover the repo.\n\n# ✍️ About\n🧲 `Grid Compositional Layout` is a `SwiftUI` view that lays out the supplied views in a grid. Easily configurable and lazily retained [`Swift 5.3`, `iOS 14.0+`, `iPadOS 14.0+`, `macOS 11.0(10.16)+`].\n\n# 📚 Contents\nPlease wait while the `.gif` files are loading (there are `9` files, that weight around `43Mb`)...\n\n|  |  |  |\n:-------------------------:|:-------------------------:|:-------------------------:\n![](Assets/01.gif) | ![](Assets/02.gif) | ![](Assets/03.gif)\n![](Assets/04.gif) | ![](Assets/05.gif) | ![](Assets/06.gif)\n![](Assets/07.gif) | ![](Assets/08.gif) | ![](Assets/09.gif)\n\n# 📦 Installation\nThere are no dependencies as well as any package managers involved. The repo contains both: the Swift Package and a demo Xcode project. \n\n## Swift Package Manager\nPlease note that the package and demo project have the minimum deplyment target for `iOS/iPadOS 14.0+` and `macOS 11.0(10.16)+`.\n\n### Xcode 11+\n\n1. Open `MenuBar` → `File` → `Swift Packages` → `Add Package Dependency...`\n2. Paste the package repository url `https://github.com/jVirus/extensions-kit` and hit `Next`.\n3. Select the installment rules.\n\nAfter specifying which version do you want to install, the package will be downloaded and attached to your project. \n\n### Package.swift\nIf you already have a `Package.swift` or you are building your own package simply add a new dependency:\n\n```swift\ndependencies: [\n    .package(url: \"https://github.com/jVirus/grid-compositional-layout/\", from: \"1.0.0\")\n]\n```\n## Manual\nYou can always use `copy-paste` the sources method 😄.\n\n# ✈️ Usage and APIs\nThe `API` layer is thin and currently has a single compositional grid variant for vertical alignment. That means, under the hood the `LazyVGrid` is used to layout the supplied views. However, the future versions will support the `LazyHGrid` and their combination, which will allow to easly describe `orthogonal` compositional layouts, just as in `UIKit` with `UICollectionViewCompositionalLayout`. \n\n## Code\nTo create a layout you need to import the framework: \n\n```swift\nimport GridCompositionalLayout\n```\n\nThen, instantiate an instance of `GridCompositionalView` type:\n\n```swift\nvar body: some View {\n  GridCompositionalView(navigationTitle: \"Your navigation title, if any\",\n                        items: 20,\n                        columns: columns) { index -\u003e AnyView in\n      gridCellView(for: index)\n  }\n}\n```\n\nthe `items` parameter describes the total number of views to be rendered by the view and `columns` is an input argument of type `[GridItem]`. It specifies how an item should be treated by the layout system. For example, if you specify the following:\n\n```swift\nlet columns = [GridItem](repeating: GridItem(.flexible(), spacing: interItemSpacing), count: 2),\n              [GridItem](repeating: GridItem(.flexible(), spacing: interItemSpacing), count: 6),\n              [GridItem](repeating: GridItem(.flexible(), spacing: interItemSpacing), count: 4)              \n```\nAnd then pass it as an input parameter to `GridCompositionalView` instance, you will get a grid, where the first `row` contains, evenly positioned `two` elements, the second row contains evenly positioned `six` elements and the `third` row contains `four` elements. Then, if there is a `fifth` row, it will use the first grid item description e.g. evenly positioned `two` columns of items.\n\nBy combining and experimenting with differnet grid item configurations, you can customize the layout of the supplied views.\n\n# ⚠️ Warning \nThe assets used in this project were taken from the `Web`. Do not use them for commertial purposes and proprietary projects. They are used just for demostration only. \n\n# 👨‍💻 Author \n[Astemir Eleev](https://github.com/jVirus)\n\n# 🔖 Licence \nThe project is available under [MIT Licence](https://github.com/jVirus/grid-compositional-layout/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feleev%2Fgrid-compositional-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feleev%2Fgrid-compositional-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feleev%2Fgrid-compositional-layout/lists"}