Skip to content
Lists & Grids

Staggered Grid

Masonry-style grid where items have varying heights

LazyVerticalStaggeredGrid packs items of different heights into columns, creating a masonry layout. StaggeredGridCells.Fixed sets the column count.

Staggered Grid demos rendered in Compose Playground
Pixel-accurate preview · light theme

Examples

01

Masonry layout

A fixed-height staggered grid of items with varying heights.

Kotlin
LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Fixed(2),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalItemSpacing = 8.dp,
    modifier = Modifier.height(220.dp)
) {
    items(tiles) { tile ->
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(tile.height)
                .clip(RoundedCornerShape(8.dp))
                .background(tile.color)
        )
    }
}