Building Grid Layout in SwiftUI

A grid is a simple structure which is used to display rows and cells. It is also a very common layout pattern to display data on the screen. Unfortunately, SwiftUI does not include a Grid layout.

Fortunately, with the help of List and stacks we can accomplish a simple Grid layout. In this post I will show you how to build a basic structure using a grid layout.

Implementation

You can also use identified(by:..) function if you don’t want to conform to Identifiable.

Now, let’s go ahead and build the grid.

Grid is simply a List control of HStack views. Each HStack is configured to show two items (Image). The result is shown below:

UPDATE

Now you can utilize the chunked function as shown in the code below:

The final output is shown below:

If you liked this article and want to learn more about SwiftUI then check out my new course SwiftUI — Declarative Interfaces for any Apple Device below:

iOS Developer, speaker and educator. Top Udemy and LinkedIn instructor. Lead instructor at DigitalCrafts. https://www.udemy.com/user/mohammad-azam-2/

iOS Developer, speaker and educator. Top Udemy and LinkedIn instructor. Lead instructor at DigitalCrafts. https://www.udemy.com/user/mohammad-azam-2/