Jetpack Compose Load N Images per Row (Grid of Images)

LazyVerticalGrid(modifier = Modifier.padding(4.dp), columns = GridCells.Fixed(2)) {    items(1..10) { imageId ->        val url = "https://picsum.photos/id/$imageId/200/300"        PhotoItem(            modifier = Modifier.padding(4.dp),            data = url        )    }}

@Composablefun PhotoItem(modifier: Modifier = Modifier, data: Any) {    val painter = rememberImagePainter(        data = data,        builder = {            placeholder(R.drawable.placeholder)            // transition when placeholder -> image            crossfade(true)            error(R.drawable.error)        }    )    Image(        painter = painter,        contentDescription = null,        modifier = modifier.aspectRatio(1.0f),        contentScale = ContentScale.Crop    )}

@Composablefun SampleScreen() {    val rowSize = 3    LazyColumn {        (1..10).chunked(rowSize).map { imageIds ->            Row {                for ((index, imageId) in imageIds.withIndex()) {                    val url = "https://picsum.photos/id/$imageId/200/300"                    PhotoItem(                        modifier = Modifier.fillMaxWidth(1f / (rowSize - index)),                        data = url                    )                }            }        }    }}

@Composablefun <T> Grid(rowSize: Int = 3, chunks: List<List<T>>, content: @Composable() (Int, Int, T, Modifier) -> Unit) {    // val rowSize = 3    chunks.withIndex().map { (rowIndex, items) ->        Row {            for ((colIndex, item) in items.withIndex()) {                content(rowIndex, colIndex, item, Modifier.fillMaxWidth(1f / (rowSize - colIndex)))            }        }    }}

val images = listOf(...)val rowSize = 3Grid(rowSize, images.chunked(rowSize)) { rowIndex, colIndex, image, modifier ->    PhotoItem(image)}