Skip to content
🤔 Documentation issue? Report or edit



Caution: The API is still experimental. Experimental APIs can change in the future or may be removed entirely.

Jetpack Compose provides an API for displaying grid or grid elements.


To arrange list items in a grid, LazyVerticalGrid provides a cells parameter that controls how cells are formed into columns. The following example displays the items in a grid, using GridCells.Adaptive to set the width of each column at least 128.dp:

fun LazyVerticalGridDemo(){
    val list = (1..10).map { it.toString() }

        cells = GridCells.Adaptive(128.dp),

        // content padding
        contentPadding = PaddingValues(
            start = 12.dp,
            top = 16.dp,
            end = 12.dp,
            bottom = 16.dp
        content = {
            items(list.size) { index ->
                    backgroundColor = Color.Red,
                    modifier = Modifier
                    elevation = 8.dp,
                ) {
                        text = list[index],
                        fontWeight = FontWeight.Bold,
                        fontSize = 30.sp,
                        color = Color(0xFFFFFFFF),
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(16.dp)

Apart from GridCells.Adaptive there are other types of cells that provide the number of columns per row. As follows

cells = GridCells.Fixed(2)
The above code will display 2 columns in 1 row.

See also:

Last update: April 28, 2022
Back to top