🌈 Create new beautiful Compose Gradients with our new wesite ->
Composable Function

LazyHorizontalGrid

A lazy horizontal grid layout.

LazyHorizontalGridSample

@Sampled
@Composable
fun LazyHorizontalGridSample() {
    val itemsList = (0..5).toList()
    val itemsIndexedList = listOf("A", "B", "C")

    val itemModifier = Modifier.border(1.dp, Color.Blue).width(80.dp).wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        items(itemsList) { Text("Item is $it", itemModifier) }

        item { Text("Single item", itemModifier) }

        itemsIndexed(itemsIndexedList) { index, item ->
            Text("Item at index $index is $item", itemModifier)
        }
    }
}

LazyHorizontalGridSpanSample

@Sampled
@Composable
fun LazyHorizontalGridSpanSample() {
    val sections = (0 until 25).toList().chunked(5)
    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        sections.forEachIndexed { index, items ->
            item(span = { GridItemSpan(maxLineSpan) }) {
                Text(
                    "This is section $index",
                    Modifier.border(1.dp, Color.Gray).width(80.dp).wrapContentSize(),
                )
            }
            items(
                items,
                // not required as it is the default
                span = { GridItemSpan(1) },
            ) {
                Text("Item $it", Modifier.border(1.dp, Color.Blue).width(80.dp).wrapContentSize())
            }
        }
    }
}

LazyGridCacheWindowSample

@Sampled
@Composable
fun LazyGridCacheWindowSample() {
    val itemsList = (0..100).toList()

    LazyVerticalGrid(
        columns = GridCells.Fixed(3),
        cacheWindow = LazyLayoutCacheWindow(aheadFraction = 0.5f, behindFraction = 0.2f),
    ) {
        items(itemsList) { item -> Text("Item $item") }
    }
}