Learn Courses My Dashboard

How to achieve this layout in SwiftUI?

Hey guys, I’m curious does anyone know how I would go by achieving this layout? (the image on left)

So far, I’m using the LazyVGrid to create the 2 columns with fixed widths of 150. I have an array of items (from core data) and I want every odd item to expand 2 columns like the green card in image. Any suggestions?

Thanks in advance!


Hi Ajea,

It’s an interesting question. You need some method of determining whether to have 2 cards per row and then switch to 1 card per row but the ForEach, which is looping over your data is already inside the LazyVGrid.

There might be something in this article from SwiftUI-Labs that you can use.


Thanks Chris! that article helped :hugs: I added in a geometry reader as well, now I’m getting the desired result


That looks great! great job getting that figured out!

1 Like

Thanks @ekraus0227! :smiley: