Jetpack Compose Grid Layout: Create Stunning Grids with LazyVerticalGrid

Jetpack Compose - Grid Layout

A grid layout is a popular UI design pattern that organizes items in rows and columns. 

In Jetpack Compose, you can create grid layouts using LazyVerticalGrid. This layout is optimized for performance and offers flexibility for building dynamic grids.

What is LazyVerticalGrid?

LazyVerticalGrid is a composable in Jetpack Compose that efficiently displays items in a grid format. It is similar to LazyColumn but organizes items into rows and columns based on the specified grid configuration.

Key Features of LazyVerticalGrid

• Dynamic Grids: Adjust the number of columns or rows dynamically.
• Efficient Rendering: Renders only visible items for better performance.
• Custom Layouts: Allows mixed content types and flexible item sizing.

Basic Usage of LazyVerticalGrid

Here’s how to create a simple grid layout:

package com.boltuix.composedemo

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
/**
 * 🌟 Grid Screen with Images
 * Displays a vertical scrolling grid with 3 fixed columns, each item as an attractive tile.
 */
@Composable
fun MyGridScreen() {
    LazyVerticalGrid(
        columns = GridCells.Fixed(3), // 📦 Creates a grid with 3 columns
        modifier = Modifier.fillMaxSize() // 🖥️ Makes the grid fill the entire screen
    ) {
        items(10) { index ->

            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(8.dp), // Adds spacing around the tile
                horizontalAlignment = Alignment.CenterHorizontally // Centers content horizontally
            ) {
                Image(
                    painter = painterResource(id = R.drawable.placeholder_image), // Replace with a drawable resource
                    contentDescription = "Image #$index",
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(120.dp), // Sets a fixed height for the image
                    contentScale = ContentScale.Crop // Crops the image to fit the width and height
                )
                Text(
                    text = "Tile #$index",
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(top = 8.dp) // Adds spacing between image and text
                )
            }
        }
    }
}

/**
 * 👀 Preview Function
 * Used to preview the grid screen in Android Studio.
 */
@Preview(showBackground = true)
@Composable
fun PreviewMyGridScreen() {
    MyGridScreen()
}


/*
 _               _   _             _
| |__     ___   | | | |_   _   _  (_) __  __
| '_ \   / _ \  | | | __| | | | | | | \ \/ /
| |_) | | (_) | | | | |_  | |_| | | |  >  <
|_.__/   \___/  |_|  \__|  \__,_| |_| /_/\_\.com

* */

..