iOS 14: Introducing SwiftUI GridView

Big changes for GridView (or CollectionView) in iOS 14. Using something more complicated than ListView, at last, is much easier. As of now, we can add columns or rows for Grid View, and, eventually, build more complex apps.

When SwiftUI was presented for the first time, it wasn’t supporting grid view by default. Of course, you could do this by yourself, but there were not any tools to make this process easier. This is why many frameworks for packages imitating the UICollectionView appered very quickly after SwiftUI's release.


One of these is QGrid, a very easy-to-use Grid View for SwiftUI. QGrid splits Grid View into 2 configurations:

  • implementation in your SwiftUI file,
  • view for single grid cell.

So first, you need to build your cell with VStack or HStack. Then during implementation, you decide how many columns will be displayed in grid.

For example: struct MyView: View { var body: some View { QGrid(myList, columns: 3) { GridCell(person: $0) } } }

QGrid is great for simple display of Grid View, i.e. without custom changes. Of course, you can customize how QGrid will lay out cells, but there are no more features. So before using QGrid you should decide, whether it really fits your app.

iOS 14 SwiftUI Grid

But right now, with iOS 14 we have an easier way to implement Grid View in our apps. Let me introduce Lazy Grid. „Lazy” means that the grid view does not create items until they are needed.

First, we need to determine columns for our Grid View. It can look like this:

    let columns = [
        GridItem(.fixed(100.0), spacing: 20.0, alignment: .leading),
        GridItem(.fixed(100.0), spacing: 20.0, alignment: .leading),
        GridItem(.fixed(100.0), spacing: 20.0, alignment: .leading),

Then we need to set our Grid in our SwiftUI View. No need to mention that placing it inside ScrollView is a good practice, right?

            ScrollView(.vertical) {
                LazyVGrid(columns: columns, alignment: .center) {
                    ForEach(0..<myList.count) { index in
                        let item = presenter.bookList[index]
                        GridCell(item: item)

Of course, we can use Lazy Grid if we need to place cells horizontally. Lazy Grid has other limitations. The main one is that it can be used only with iOS 14. So if you want to build your app for older iOS versions, using one of the available frameworks like QGrid, is a better way to go.

Check our latest product - it's based on our experience of managing over 50-people strong company. The tool we're missing as a small company and not an enterprise. is an employee and performance management software. It's an unique tool allowing everyone to be in the loop - by having up to date info about co-workers, time-off, benefits, assets, helping with one-on-ones, being a go-to place for company-wide announcements.

Check out

Contact us

* Required fields

The controller of your personal data provided via this contact form is Prograils sp. z o.o., with a registered seat at Sczanieckiej 9A/10, 60-215 Poznań. Your personal data will be processed in order to respond to your inquiries and for our marketing purposes (e.g. when you ask us for our post-development, maintenance or ad hoc engagements for your app). You have the rights to: access your personal data, rectify or erase your personal data, restrict the processing of your personal data, data portability and to object to the processing of your personal data. Learn more.


We do not track you online. We use only session cookies and anonymous identifiers for the purposes specified in the cookie policy. No third-party trackers.

I understand
Elo Mordo!Elo Mordo!