Using LazyVGrid & LazyHGrid for Grid Layouts in SwiftUI

Written by Team Kodeco

Presenting a collection of items in a grid layout is a common requirement in many applications. SwiftUI addresses this need with two versatile layout containers: LazyVGrid and LazyHGrid. These containers enable the specification of the number of columns or rows and the spacing between them, making it convenient to design a grid that is logically structured and visually pleasing.

Before creating a grid layout, you’ll need to define a GridItem layout. GridItem represents the layout properties for a single row or column in a grid. It allows for a fixed, flexible or adaptive size to be specified, and can be reused for creating multiple similar rows or columns.

Lazy in LazyVGrid and LazyHGrid means these views create their content on demand, similar to the way List works. Instead of generating all views upfront, SwiftUI only creates the views needed to fill the screen, plus a little extra for scrolling. When the user scrolls, views that move off-screen are destroyed, and new ones are created. This on-demand approach is a key performance optimization for rendering large collections of data because it significantly reduces the memory footprint.

Now, let’s see how to use these views in your code.

struct ContentView: View {
  var body: some View {
    // Define your grid layout first
    let columns = [
      GridItem(.flexible()),
      GridItem(.flexible())
    ]
    // Then create a LazyVGrid using the layout
    LazyVGrid(columns: columns, spacing: 20) {
      ForEach(0..<10) { index in
        Text("Item \(index)")
          .padding()
          .background(Color.blue)
          .cornerRadius(10)
      }
    }
  }
}

Your preview should look like this:

In this example, you define a layout with two flexible columns, and use this layout in LazyVGrid to display a list of items with a spacing of 20 points between them. Flexible columns or rows adapt to available space and evenly distribute it amongst themselves.

For LazyHGrid, the process is similar, but you define rows instead of columns.

struct ContentView: View {
  var body: some View {
    // Define your grid layout first
    let rows = [
      GridItem(.fixed(100)),
      GridItem(.flexible())
    ]
    // Then create a LazyHGrid using the layout
    LazyHGrid(rows: rows, spacing: 20) {
      ForEach(0..<10) { index in
        Text("Item \(index)")
          .padding()
          .background(Color.blue)
          .cornerRadius(10)
      }
    }
  }
}

Here you’ve defined one fixed-height row and one flexible row. The fixed-height row will always be the same height, whereas the flexible row will occupy the remaining space.

By harnessing LazyVGrid and LazyHGrid in your SwiftUI projects, you can craft grid layouts that are both performance-optimized and visually compelling. Experiment with different row, column, and spacing configurations to discover the ideal setup for your app’s needs.