Improve your app’s UI by making grids in Swift using LazyVGrid and LazyHGrid to build vertical and horizontal scrolls. Learn to create grids with SwiftUI by developing a reminder app that categorizes reminders with due dates.

Before they were introduced during Apple’s 2020 Worldwide Developer’s Conference, grids were among the most-desired features to be included in SwiftUI. Up to that point, many developers came up with their implementation to approximate UICollectionView in SwiftUI. Then the Swift team officially introduced the LazyVGrid and LazyHGrid layouts at WWDC 2020.

In this tutorial, we’ll go over the basics of the SwiftUI grid layout. We’ll demonstrate how to create grids with SwiftUI by developing a reminder app that helps you categorize your reminders with a due date and mark them complete.

We’ll focus on the following:

• Grid layouts in Swift
• SwiftUI grid layout example
• GridItems
• LazyVGrid
• LazyHGrid
• PinnedScrollableViews

To follow along, you should have basic knowledge of:

• SwiftUI
• Stacks
• Observable object
• ScrollViews

Grid layouts in Swift

A grid layout can be seen in almost all Apple applications. You may have noticed it in the Photos app or the Calendar app. It helps to accommodate more vital data into the same space by splitting the views into rows and columns.

#swiftui #developer