---
title: "LazyHorizontalGrid"
description: "A lazy horizontal grid layout. It composes only visible columns of the grid.

Sample:


Sample with custom item spans:"
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun LazyHorizontalGrid(
    rows: GridCells,
    modifier: Modifier = Modifier,
    state: LazyGridState = rememberLazyGridState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    horizontalArrangement: Arrangement.Horizontal =
        if (!reverseLayout) Arrangement.Start else Arrangement.End,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: LazyGridScope.() -> Unit,
)
```


A lazy horizontal grid layout. It composes only visible columns of the grid.

Sample:


Sample with custom item spans:

#### Parameters

| | |
| --- | --- |
| rows | a class describing how cells form rows, see `GridCells` doc for more information |
| modifier | the modifier to apply to this layout |
| state | the state object to be used to control or observe the list's state |
| contentPadding | specify a padding around the whole content |
| reverseLayout | reverse the direction of scrolling and layout. When `true`, items are laid out in the reverse order and `LazyGridState.firstVisibleItemIndex` == 0 means that grid is scrolled to the end. Note that `reverseLayout` does not change the behavior of `horizontalArrangement`, e.g. with `Arrangement.Start` `123###` becomes `321###`. |
| verticalArrangement | The vertical arrangement of the layout's children |
| horizontalArrangement | The horizontal arrangement of the layout's children |
| flingBehavior | logic describing fling behavior |
| userScrollEnabled | whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using the state even when it is disabled. |
| overscrollEffect | the `OverscrollEffect` that will be used to render overscroll for this layout. Note that the `OverscrollEffect.node` will be applied internally as well - you do not need to use Modifier.overscroll separately. |
| content | the `LazyGridScope` which describes the content |




<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** Use the non deprecated overload

```kotlin
@Composable
fun LazyHorizontalGrid(
    rows: GridCells,
    modifier: Modifier = Modifier,
    state: LazyGridState = rememberLazyGridState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    horizontalArrangement: Arrangement.Horizontal =
        if (!reverseLayout) Arrangement.Start else Arrangement.End,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: LazyGridScope.() -> Unit,
)
```



## Code Examples
### LazyHorizontalGridSample
```kotlin
@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
```kotlin
@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())
            }
        }
    }
}
```