Welcome to Week 6 of the SwiftUI Blog Series! Last week, we explored how Stacks and Frames help structure layouts. But what if you need a more flexible, scrollable, or complex grid-based UI?
Enter LazyVGrid and LazyHGrid — SwiftUI’s powerful grid-based layout system. In this post, you’ll learn how to create responsive, performant, and adaptive grids for your apps.
Enter LazyVGrid and LazyHGrid — SwiftUI’s powerful grid-based layout system. In this post, you’ll learn how to create responsive, performant, and adaptive grids for your apps.
Why Use Grids in SwiftUI?
Grids allow you to create multi-column or multi-row layouts efficiently. Unlike HStack and VStack, which are linear, grids provide better structure when working with large datasets.
Key Benefits of Using Grids:
- Adaptive layouts: Easily adjust columns and rows based on screen size.
- Lazy loading: SwiftUI loads only the visible elements, improving performance.
- Flexible customization: Define spacing, alignment, and sizing for your grids.
Understanding Grid Layouts in SwiftUI
SwiftUI provides two types of grids:
- LazyVGrid: Creates a vertical grid (columns) inside a ScrollView.
- LazyHGrid: Creates a horizontal grid (rows) inside a ScrollView.
Both grids require a GridItem array to define their structure.
Creating a Basic LazyVGrid
A LazyVGrid arranges views into multiple columns:
Explanation:
- GridItem(.fixed(100)) defines two columns of fixed width (100pt).
- LazyVGrid lays out views vertically.
- ScrollView ensures scrolling when content exceeds screen height.
Adaptive Columns: Responsive Grids
What if you want the grid to adjust automatically based on available space? Use adaptive columns:
How It Works:
- GridItem(.adaptive(minimum: 80)) automatically creates as many columns as can fit in the available space.
- If there's more space, more columns appear dynamically.
Creating a LazyHGrid
A LazyHGrid works similarly but arranges views horizontally in rows:
Key Takeaways:
- LazyHGrid arranges items horizontally, requiring a ScrollView(.horizontal).
- rows define the number of horizontal sections.
Mixing Fixed and Flexible Grid Items
For more complex layouts, mix fixed, flexible, and adaptive columns:
Explanation:
- First column is always 100pt wide.
- Second column expands to use available space.
- Third column adapts dynamically based on available width.
Building a Photo Gallery with LazyVGrid
Let's build a simple photo gallery using LazyVGrid and Photos:
 |  |
Important: Make sure to add images to your project's Assets Catalog with the names photo1.jpg to photo15.jpg for this example to work correctly.
How It Works:
- Adaptive Grid Layout: Images adjust dynamically with GridItem(.adaptive(minimum: 100, maximum: 150)).
- Zoom Animation: Clicking an image enlarges it slightly with scaleEffect.
- Fullscreen Preview: Clicking an image opens it in full view with a fade effect.
- Dark Mode UI: A black background ensures high contrast.
Key Takeaways
By mastering SwiftUI’s grid system, you can create powerful, flexible, and efficient layouts with minimal code.
- Use LazyVGrid for vertical lists and LazyHGrid for horizontal ones.
- Adaptive columns allow grids to adjust dynamically.
- Mixing fixed, flexible, and adaptive layouts provides ultimate control.
- Grids are ideal for photo galleries, dashboards, and data-heavy views.
By mastering SwiftUI’s grid system, you can create powerful, flexible, and efficient layouts with minimal code.
What’s Next?
Next week, we’ll explore ZStacks and Overlays, learning how to layer views for stunning visual effects. Get ready to add depth and dimension to your SwiftUI layouts!
Next week, we’ll explore ZStacks and Overlays, learning how to layer views for stunning visual effects. Get ready to add depth and dimension to your SwiftUI layouts!
