Displaying tabular content with LazyHGrid and LazyVGrid

Like lazy stacks, lazy grids also use lazy loading to display a collection of items. They only initialize a subset of items that will soon be displayed on the screen when the user scrolls. You can display content from top to bottom using a LazyVGrid view and from left to right using a LazyHGrid view.

In this recipe, we’ll use the LazyVGrid and LazyHGrid views to display an extensive range of numbers embedded in colorful circles.

Getting ready

Create a new SwiftUI app called LazyGrids.

How to do it…

We’ll use a ForEach structure count for numbers from 0 to 999 and display them in a LazyHGrid, then repeat similar steps to display the numbers in a LazyVGrid view. The steps are as follows:

1. In the ContentView struct, just above the body variable, create an array of GridItem columns. The GridItem struct helps configure the layout of the lazy grid:

   let columnSpec = [
        ...