Adaptive Grids with LazyVGrid
Lay out cards in flexible grid columns.
Adaptive Grids with LazyVGrid is a free SwiftUI Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why a Grid?
Stacks give you rows or columns, but a LazyVGrid arranges items into neat rows and columns, like a photo album. 🖼️
Define the Columns
A LazyVGrid needs a columns array of GridItem values that describe how many tracks to lay out.
let columns = [GridItem(), GridItem()]
LazyVGrid(columns: columns) {
ForEach(items) { Cell($0) }
}Flexible Items
A GridItem(.flexible()) stretches to share space evenly, so two flexible items make two equal columns.
let columns = [
GridItem(.flexible()),
GridItem(.flexible())
]Fixed Width Tracks
Use GridItem(.fixed(80)) when you want a column to stay exactly 80 points wide no matter the screen.
let columns = [GridItem(.fixed(80))]Truly Adaptive
The magic option is .adaptive(minimum:): it fits as many columns as will fit, adjusting to any screen size.
let columns = [
GridItem(.adaptive(minimum: 100))
]Always Inside a Scroll
Wrap your LazyVGrid in a ScrollView so the grid can grow past the screen and load cells lazily.
ScrollView {
LazyVGrid(columns: columns) {
ForEach(items) { Cell($0) }
}
}Spacing Between Cells
Tune the gaps with a spacing argument on the grid and on each GridItem for tidy, balanced cells.
LazyVGrid(columns: columns, spacing: 16) {
ForEach(items) { Cell($0) }
}Cells Are Just Views
Each item in the ForEach becomes a cell, so any view works: an image, a card, or a labeled button.
ForEach(photos) { photo in
Image(photo.name)
.resizable()
}Lazy by Name
Like other lazy containers, LazyVGrid builds cells as they scroll in, so large galleries stay smooth.
Horizontal Cousin
Need columns of fixed rows scrolling sideways? LazyHGrid is the horizontal counterpart with the same GridItem API.
Responsive Layouts
One adaptive grid looks great on a phone and an iPad, since columns reflow automatically to fill the space. ✨
Quick Check
Think about which GridItem reacts to screen size.
Recap
You learned to build flexible, fixed, and adaptive grids with LazyVGrid inside a ScrollView for responsive layouts. 🎉
Frequently asked questions
Is the “Adaptive Grids with LazyVGrid” lesson free?
Yes — the full text of “Adaptive Grids with LazyVGrid” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Adaptive Grids with LazyVGrid”?
Lay out cards in flexible grid columns. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Adaptive Grids with LazyVGrid” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Horizontal & Vertical ScrollView
- LazyVStack & LazyHStack
- Adaptive Grids with LazyVGrid
- ScrollView Reader & Anchors