How to use LazyVerticalGrid & LazyHorizontalGrid
Jetpack Compose (Complete Guide)
Introduction
Jetpack Compose provides powerful lazy components to efficiently display large lists and grids.
While LazyColumn and LazyRow are used for vertical and horizontal lists, LazyVerticalGrid and LazyHorizontalGrid are used when you want to show items in grid format.
These components are lazy, meaning:
- Only visible items are composed
- Better performance
- Ideal for product lists, galleries, dashboards, and games
In this article, you’ll learn:
- What LazyVerticalGrid is
- What LazyHorizontalGrid is
- Grid types
- Real examples
- Best practices
- Common mistakes
What Is LazyVerticalGrid?
LazyVerticalGrid displays items in a vertical scrolling grid (rows go down, columns are fixed).
Common Use Cases
- Shopping apps (products grid)
- Image galleries
- Dashboard cards
- Game levels screen
Basic LazyVerticalGrid Example
@Composable
fun SimpleVerticalGrid() {
LazyVerticalGrid(
columns = GridCells.Fixed(2),
modifier = Modifier.padding(8.dp)
) {
items(20) { index ->
Card(
modifier = Modifier
.padding(8.dp)
.fillMaxWidth()
) {
Text(
text = "Item $index",
modifier = Modifier.padding(16.dp)
)
}
}
}
}- GridCells.Fixed(2) → 2 columns
- Scroll direction → Vertical
- Items load lazily
GridCells Types in LazyVerticalGrid
1️⃣ Fixed Columns
columns = GridCells.Fixed(3)
👉 Always shows 3 columns
2️⃣ Adaptive Columns
columns = GridCells.Adaptive(minSize = 120.dp)👉 Automatically adjusts columns based on screen size
✅ Best for responsive UI
What Is LazyHorizontalGrid?
LazyHorizontalGrid displays items in a horizontal scrolling grid (columns scroll sideways, rows are fixed).
Common Use Cases
- Music playlists
- Category sliders
- Horizontal dashboards
- Game characters selection
Basic LazyHorizontalGrid Example
@Composable
fun SimpleHorizontalGrid() {
LazyHorizontalGrid(
rows = GridCells.Fixed(2),
modifier = Modifier.height(200.dp)
) {
items(20) { index ->
Card(
modifier = Modifier
.padding(8.dp)
.width(120.dp)
) {
Text(
text = "Item $index",
modifier = Modifier.padding(16.dp)
)
}
}
}
}- GridCells.Fixed(2) → 2 rows
- Scroll direction → Horizontal
- Height must be defined
LazyVerticalGrid vs LazyHorizontalGrid
| Feature | LazyVerticalGrid | LazyHorizontalGrid |
|---|---|---|
| Scroll Direction | Vertical | Horizontal |
| Fixed Size | Columns | Rows |
| Best For | Product grids | Sliders & carousels |
Real-World Example: Product Grid UI
@Composable
fun ProductGrid(products: List) {
LazyVerticalGrid(
columns = GridCells.Adaptive(150.dp),
contentPadding = PaddingValues(12.dp)
) {
items(products) { product ->
Card(
modifier = Modifier.padding(8.dp),
elevation = CardDefaults.cardElevation(6.dp)
) {
Column(
modifier = Modifier.padding(12.dp)
) {
Text(text = product)
Text(text = "₹999", color = Color.Green)
}
}
}
}
} Spacing Between Grid Items
LazyVerticalGrid(
columns = GridCells.Fixed(2),
horizontalArrangement = Arrangement.spacedBy(12.dp),
verticalArrangement = Arrangement.spacedBy(12.dp)
)✅ Prevents UI from looking congested
Performance Tips (Important)
✔ Use items() instead of forEach
✔ Avoid heavy composables inside grid items
✔ Use rememberLazyGridState() for scroll handling
✔ Prefer Adaptive() for different screen sizes
❌ Common Mistakes to Avoid
❌ Not defining height in LazyHorizontalGrid
❌ Using nested scrollable layouts unnecessarily
❌ Too many recompositions inside items
❌ Forgetting padding and spacing
When to Use Grid Instead of Column/Row?
Use LazyVerticalGrid when:
- Multiple columns needed
- Visual density matters
Use LazyHorizontalGrid when:
- Horizontal scrolling with multiple rows
- Slider-style layouts
Final Thoughts
LazyVerticalGrid and LazyHorizontalGrid are essential components in modern Jetpack Compose apps.
They help create beautiful, performant, and scalable UI with minimal code.
If you are building:
- Shopping apps
- Gallery apps
- Game UIs
- Dashboard screens
👉 Lazy grids are the right choice
