Grid Layouts Around the Fold

What’s the best way to make a Grid or LazyVGrid adapt around the fold in book mode? Is there a built-in way to keep grid items from crossing the .division region, or would you normally handle that layout manually?

Answered by DTS Engineer in 906632022

Hi @hiddevdploeg,

To build efficient scrolling grids in SwiftUI, use LazyVGrid or LazyHGrid combined with a ScrollView. Provide an array of GridItem instances to configure sizing and spacing properties for columns or rows.

If your application requires a fixed layout or better support for cell spacing and alignment without lazy-loading overhead, use the standard Grid container initialized with GridRow structures instead

Once you've determine the layouts of your grids for each size class and configuration, use reserved regions to adjust the spacing and alignment as needed. For more details, see the post below:

How to know when active regions are changing?

https://developer.apple.com/forums/thread/847876?answerId=906445022#906445022

Cheers,

Paris X Pinkney |  WWDR | DTS Engineer

Hi @hiddevdploeg,

To build efficient scrolling grids in SwiftUI, use LazyVGrid or LazyHGrid combined with a ScrollView. Provide an array of GridItem instances to configure sizing and spacing properties for columns or rows.

If your application requires a fixed layout or better support for cell spacing and alignment without lazy-loading overhead, use the standard Grid container initialized with GridRow structures instead

Once you've determine the layouts of your grids for each size class and configuration, use reserved regions to adjust the spacing and alignment as needed. For more details, see the post below:

How to know when active regions are changing?

https://developer.apple.com/forums/thread/847876?answerId=906445022#906445022

Cheers,

Paris X Pinkney |  WWDR | DTS Engineer

Grid Layouts Around the Fold
 
 
Q