Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/pietropizzi/GridStack

A flexible grid layout view for SwiftUI
https://github.com/pietropizzi/GridStack

grid ios macos swift swiftui tvos watchos

Last synced: 3 months ago
JSON representation

A flexible grid layout view for SwiftUI

Host: GitHub
URL: https://github.com/pietropizzi/GridStack
Owner: pietropizzi
License: mit
Created: 2019-07-07T13:53:29.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2022-02-21T13:56:51.000Z (over 2 years ago)
Last Synced: 2024-03-17T15:47:02.456Z (3 months ago)
Topics: grid, ios, macos, swift, swiftui, tvos, watchos
Language: Swift
Homepage:
Size: 183 KB
Stars: 652
Watchers: 7
Forks: 34
Open Issues: 4
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Lists

awesome-stars - GridStack
awesome-swiftui-libraries - GridStack - A flexible grid layout view for SwiftUI (Grid / Content)
awesome-swiftui - pietropizzi/GridStack - A flexible grid layout view for SwiftUI (Samples)
awesome-swiftui - A flexible grid layout view for SwiftUI
fucking-about-SwiftUI - GridStack

README

# 📱GridStack

A flexible grid layout view for SwiftUI.

## WWDC20 Update

Apple  released [`LazyVGrid`](https://developer.apple.com/documentation/swiftui/lazyvgrid) and [`LazyHGrid`](https://developer.apple.com/documentation/swiftui/lazyhgrid) at WWDC20.

If you are fine to only support **i(Pad)OS 14, macOS 11, tvOS 14, watchOS 7** respectively those `^--` are definitely the way to go.

If you want to support **i(Pad)OS 13, macOS 10.15, tvOS 13, watchOS 6** keep on reading.

---

![Release](https://img.shields.io/github/v/release/pietropizzi/GridStack?color=blue&sort=semver)
![Build & Test](https://github.com/pietropizzi/GridStack/workflows/Build%20&%20Test/badge.svg)

**📱 iOS 13+,**
**💻 macOS 10.15+,**
**📺 tvOS 13+,**
**⌚ watchOS 6+**

Simply pass the minimum width the grid cells should have and the spacing between them and it will adjust depending on the available width.

So writing this:

![Code](https://user-images.githubusercontent.com/410305/74313631-5670ce80-4d74-11ea-9814-4e06e8463372.png)

will give you you this:

Screenshot 2019-07-14 at 14 07 02

It also adjusts correctly when the device is rotated:

![rotation](https://user-images.githubusercontent.com/410305/61183421-6dfea200-a641-11e9-99c8-3f24cc35d1d8.gif)

## 🗺 Usage Overview

Think 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.

To 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.

## 👕 Sizing your views inside the cells

The 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.

### Height defined by content

```swift
GridStack(...) { index, cellWidth in
Text("\(index)")
// Don't pass any height to the frame to let it be defined by it's content
.frame(width: cellWidth)
}
```

### Square items

```swift
GridStack(...) { index, cellWidth in
Text("\(index)")
// Pass the cellWidth as width and height to the frame to make a square
.frame(width: cellWidth, height: cellWidth)
}
```

### Aspect Ratio items

```swift
GridStack(...) { index, cellWidth in
Text("\(index)")
// Pass the cellWidth as width and a portion of it as height to get a certain aspect ratio
.frame(width: cellWidth, height: cellWidth * 0.75)
}
```

## ✍️ Signature

```swift
GridStack(
minCellWidth: Length,
spacing: Length,
numItems: Int,
alignment: HorizontalAlignment = .leading,
content: (index: Int, cellWidth: CGFloat) -> Void
)
```

## 📝 Mentions

I created `GridStack` by taking ideas from [FlowStack](https://github.com/johnsusek/FlowStack) by [John Susek](https://github.com/johnsusek).