Grid Layout In SwiftUI

SwiftUI

Next SwiftUI release introduces Grid that helps a lof creating layouts.

Both horizontal and vertical grids are lazy, here you read only about LazyVGrid but they are very similar to each other.

First, you need some data, it can be any type, here are numbers.

let data = (1…100)

Next, an array of GridItems, for now, has only one item but later you read about adding different types.

let gridColumns = [GridItem()]

The last step is to create ScrollView with LazdyVGrid and ForEach.

var body: some View {
    ScrollView {
        LazyVGrid(columns: gridColumns) {
            ForEach(data, id: \.self) { number in
                ZStack {
                    Color.red
                    Text(“\(number)“)
                 }
             }
        }
        .padding()
    }
}

The effect you’ll see. The red color is important to see view size.

Now, why it looks like this.

The key path here is that array with GridItems. There are three types of GridItem:

  • fixed: item will have one size specified size
  • adaptive: the system will put there as much as it’s possible items, but there won’t be smaller than the minimum value. There is a maximum parameter in case if the view would be too big.
  • flexible: system divides available space equally for items in an array, for example, if the array has 4 elements each GridItem will have 25% available space.
  • default: default value is flexible.

Now, let’s play with that array with GridItems. The only array will be changing, the rest of the code remains the same.

Use, fixed instead of the default value.

let gridColumns = [
    GridItem(.fixed(50))
]

And now, with adaptive

let gridColumns = [
    GridItem(.adaptive(minimum: 40))
]

Mixing

Interesting things happen when you start mixing different types.

let gridColumns = [
    GridItem(.flexible(minimum: 30)),
    GridItem(.adaptive(minimum: 40))
]

Why there are four columns with only two GridItems? The first flexible divided width by two, and it has half and the second half is for adaptive. The adaptive tries to put there as many items and it’s possible and there is enough space for three of them and that’s why there are four columns.
Both items have half, if you want to make them smaller or larger just add more the same items. For example, you want to flexible item with 20% of width and 80% of width for adaptive, put 1 flexible item, and 4 adaptive.

let gridColumns = [
    GridItem(.flexible(minimum: 30)),
    GridItem(.adaptive(minimum: 40)),
    GridItem(.adaptive(minimum: 40)),
    GridItem(.adaptive(minimum: 40)),
    GridItem(.adaptive(minimum: 40))
]

Remember that each item has a minimum width.

Let’s add a fixed item to them.

let gridColumns = [
    GridItem(.flexible(minimum: 30)),
    GridItem(.fixed(15)),
    GridItem(.adaptive(minimum: 40))
]

What happens now is the available width the size of fixed is substracted and the rest is divided by remaining items.