How to achieve lazyVertical grid like in LazyColumn in JetpackCompose

Question

How to achieve like this layout in Lazycolumn. this is can be done with lazy vertical Grid but how to do it with Lazy column like first layout column with two grid cells in one row and so on with a list of data ex (categories ) and the next layout with 3grids rows (data products). in jetPack compose

Answer 1

You can use GridItemSpan on item{} scope fun

 val cellCount = 2


LazyVerticalGrid(
    modifier = modifier,
    columns = GridCells.Fixed(cellCount),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(10.dp),
    contentPadding = PaddingValues(bottom = 30.dp, top = 10.dp, start = 5.dp),
) {
item(span = { GridItemSpan(cellCount) }) {
 // one item on a row
 }
item() { // Two items }

}

Note: GridItemSpan is stable now on the latest compose version