Lazy Grids in Jetpack Compose

Originally published on Medium:
https://medium.com/@supsabhi/lazy-grids-in-jetpack-compose-8a80f52421c9

🧩 Mastering Grids in easy way
Ever opened an app and felt overwhelmed by a long, never-ending list? Or maybe you’ve needed to show a bunch of beautiful photos or product cards without cramming them into a tiny space?

You know, the ones that scroll vertically and show these items one after another. But what if you want to show these items side by side, like a gallery, product catalog, or contact cards?

That’s where the mighty Grid Layout comes in to save the day!

🏛 Classic Android Grids
In classic Android (XML days), developers often used:

GridLayout or RecyclerView with GridLayoutManager for arranging UI components
GridView for bigger, scrollable lists — like image thumbnails or product tiles in shopping apps
💡 So… what exactly is a Grid Layout?
A Grid is like a shelf with rows and columns.
It’s a way to organize items into rows and columns so everything is neat, tidy, and easy to find.

We use grid layouts whenever we need to display a collection of items that are:

Visually Similar — Like a gallery of product images or thumbnails
Equal in Importance — Unlike a news feed where the top item is most important, items in a grid usually hold similar weight
High in Quantity — It’s a much better use of screen space than a vertical list when you have dozens of things to show
⚡ Jetpack Compose Grids Got Lazy!
In Jetpack Compose, there are mainly two ways to arrange items:

1. GridLayout
Good for static, small-to-medium datasets
Builds the whole UI upfront, so if you have a lot of items, it may slow things down
Best for forms or dashboards where all elements should be shown at once
No built-in “lazy loading” here

2. Lazy Lists & Lazy Grids
Smart approach — only composes what’s visible on screen
Includes LazyColumn (for vertical lists) and LazyVerticalGrid (for grids)
Only creates as many views as fit on the screen plus a few extra for smooth scrolling
Fast and memory-friendly, especially for huge lists

🧠 LazyList vs LazyGrid — When to Use What?
Both LazyLists and LazyGrids are “lazy” because they only load the items currently visible on screen, saving battery and memory.

🪄 LazyList (LazyColumn, LazyRow)
Displays items one after another (vertically or horizontally)
Shows sequential content, so each item takes one entire row or column
Perfect for feeds, chat screens, or any single-column list
🧩 LazyGrid (LazyVerticalGrid, LazyHorizontalGrid)
Displays items in rows and columns, forming a neat grid layout
Shows content in a collection manner, so each item takes up one cell in the grid
Perfect for e-commerce product grids, image galleries, or dashboards
🧰 Types of Grids in Jetpack Compose
Jetpack Compose provides two main grid types out of the box:

LazyVerticalGrid
Scrolls vertically, items arranged in columns
Think of your phone’s photo gallery
LazyHorizontalGrid

Scrolls horizontally, items arranged in column
Also great for galleries or horizontally scrolling product carousels
Both work exactly like LazyColumn or LazyRow, but with the magic of multiple columns or rows.

🚀 Quick Example: LazyVerticalGrid

LazyVerticalGrid(
    columns = GridCells.Fixed(3) // 3 columns
) {
    items(20) { index ->
        Text("Item $index", modifier = Modifier.padding(8.dp))
    }
}

columns = GridCells.Fixed(3) → We’re asking for 3 fixed columns
Want an adaptive grid that fits as many columns as possible with at least 100dp width?

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 100.dp)
) {
    items(50) { index ->
        Text("Adaptive $index", modifier = Modifier.padding(8.dp))
    }
}

🧩 GridCells Properties — The Secret Sauce

The real power of LazyVerticalGrid lies in how you define its columns using the GridCells object.

Here are the main ways:

GridCells.Fixed(count) — Sets an exact number of columns. Use when you always want, say, 3 columns, no matter the screen size (great for photo galleries)
GridCells.Adaptive(minSize) — Creates as many columns as will fit, ensuring each column is at least a certain size. Makes your grid responsive across devices
GridCells.FixedSize(size) — Sets an exact width for each column and fills the screen. Less common, but useful for rigid layouts

🏁 Final Thoughts
Lazy Grids in Jetpack Compose are a total game-changer for displaying items in a flexible, scrollable grid — without dealing with RecyclerView adapters or XML layouts.

They’re powerful, adaptive, and super easy to use. Once you try them, you’ll never want to go back.

So go ahead — build that gallery, product grid, or dashboard with LazyVerticalGrid and let Compose handle the heavy lifting! 🚀

Grid layouts are everywhere in Android, and Jetpack Compose’s Lazy grids make building them for modern apps super easy.

💡 Detailed source code and more Compose examples are available on my GitHub — check it out and explore!

https://github.com/supsabhi/GridLayoutDemo.git