Anyone know of a proper way to achieve a grid like...

# compose

[sindrenm]

Anyone know of a proper way to achieve a grid like the first image using LazyVerticalGrid? That one uses a Column in its second item {} to get the two items underneath each other on the right of the larger image. But I would like to avoid a Column { image, image }, as each image should be in its own item {}. But I can't seem to put the third image on the right spot, as per the second screenshot.

[sindrenm]

Code for first screenshot:

LazyVerticalGrid(
    modifier = Modifier.fillMaxSize(),
    columns = GridCells.Fixed(3),
    verticalArrangement = spacing,
    horizontalArrangement = spacing,
    contentPadding = innerPadding,
) {
    item(span = { GridItemSpan(2) }) {
        val url = uniqueImageUrls.firstOrNull()

        ImageCell(url)
    }

    item {
        Column(verticalArrangement = spacing) {
            val second = uniqueImageUrls.getOrNull(1)
            ImageCell(second)

            val third = uniqueImageUrls.getOrNull(2)
            ImageCell(third)
        }
    }

    items(uniqueImageUrls.drop(3)) { imageUrl ->
        ImageCell(imageUrl)
    }
}

[sindrenm]

Code for second screenshot:

LazyVerticalGrid(
    modifier = Modifier.fillMaxSize(),
    columns = GridCells.Fixed(3),
    verticalArrangement = spacing,
    horizontalArrangement = spacing,
    contentPadding = innerPadding,
) {
    itemsIndexed(
        items = uniqueImageUrls,
        span = { index, _ ->
            when (index) {
                0 -> GridItemSpan(2)
                else -> GridItemSpan(1)
            }
        },
    ) { _, imageUrl ->
        ImageCell(imageUrl)
    }
}

[sindrenm]

The issue with the latter, of course, is that there's only room for a single more item horizontally after a GridItemSpan(2) on index 0, which will be taken up by the second item. And then the grid puts the next items after that below the large first item. But I would like it to flow next to it instead.

[sindrenm]

I might need a custom layout for this, perhaps?

[efemoney]

Have you tried the staggered grid?

[sindrenm]

I did, but it doesn't have span support. However, I just saw the amazing notes from @Colton Idle over at https://kotlinlang.slack.com/archives/CJLTWPH7S/p1674688976815819, which suggests that span support is coming in 1.4.0, so I'm going to try to use that. 🎉