32.6 Working with Adaptive GridItems

So far, we have seen how the flexible GridItem size setting allows us to define how many columns or rows appear in a grid. The adaptive setting, however, configures the grid view to automatically display as many rows or columns as it can fit into the space occupied by the view. To use adaptive sizing, modify the gridItems array to contain a single adaptive item as follows:

private var gridItems = [GridItem(.adaptive(minimum: 50))]

This change will result in the grid displaying as many columns as possible with the restriction that the column width cannot be less than 50dp. The following figure demonstrates a partial example of this change as it appears on an iPhone 11 in portrait orientation:

Figure 32-4

Figure 32-5, on the other hand, shows the same grid on an iPhone 11 in landscape orientation. Note that the grid has automatically adapted the number of columns to occupy the wider viewing area:

Figure 32-5