Jetpack Compose Vertical Grid single item span size

Jetpack Compose version 1.1.0-beta03 introduced horizontal spans to LazyVerticalGrid.

Example code:

val list by remember { mutableStateOf(listOf("A", "E", "I", "O", "U")) }

LazyVerticalGrid(
    cells = GridCells.Fixed(2)
) {
    // Spanned Item:
    item(
        span = {
            // Replace "maxCurrentLineSpan" with the number of spans this item should take.
            // Use "maxCurrentLineSpan" if you want to take full width.
            GridItemSpan(maxCurrentLineSpan)
        }
    ) {
        Text("Vowels")
    }

    // Other items:
    items(list) { item ->
        Text(item)
    }
}

There is no support for this out of the box at present. The way I have solved this for now is to use a LazyColumn then the items are Rows and in each Row you can decide how wide an item is, using weight.

I have implemented and in my case I have headers (full width), and cells of items of equal width (based on how wide the screen is, there could be 1, 2 or 3 cells per row). It's a workaround, but until there is native support from VerticalGrid this is an option.

My solution is here - look for the LazyListScope extensions.

Edit: this is no longer necessary as LazyVerticalGrid supports spans now, here's an example

LazyVerticalGrid(
    columns = GridCells.Adaptive(
        minSize = WeatherCardWidth,
    ),
    modifier = modifier,
    contentPadding = PaddingValues(all = MarginDouble),
    horizontalArrangement = Arrangement.spacedBy(MarginDouble),
    verticalArrangement = Arrangement.spacedBy(MarginDouble),
) {
    state.forecastItems.forEach { dayForecast ->
        item(
            key = dayForecast.header.id,
            span = { GridItemSpan(maxLineSpan) }
        ) {
            ForecastHeader(
                state = dayForecast.header,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = MarginDouble),
            )
        }
        items(
            items = dayForecast.forecast,
            key = { hourForecast -> hourForecast.id }
        ) { hourForecast ->
            ForecastWeatherCard(
                state = hourForecast,
                modifier = Modifier.fillMaxWidth(),
            )
        }
    }
}

Adapting the code from the answer, I created a more "general" purpose method, It can be used with Adaptive and Fixed, I'm very new with Compose so I accept suggestions

@Composable
fun HeaderGrid(cells: GridCells, content: HeaderGridScope.() -> Unit) {
    var columns = 1
    var minColumnWidth = 0.dp
    when (cells) {
        is GridCells.Fixed -> {
            columns = cells.count
            minColumnWidth = cells.minSize
        }
        is GridCells.Adaptive -> {
            val width = LocalContext.current.resources.displayMetrics.widthPixels
            val columnWidthPx = with(LocalDensity.current) { cells.minSize.toPx() }
            minColumnWidth = cells.minSize
            columns = ((width / columnWidthPx).toInt()).coerceAtLeast(1)
        }
    }
    LazyColumn(modifier = Modifier.fillMaxWidth()){
        content(HeaderGridScope(columns, minColumnWidth, this))
    }
}

fun <T>HeaderGridScope.gridItems(items: List<T>, content: @Composable (T) -> Unit) {
    items.chunked(numColumn).forEach {
        listScope.item {
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
                it.forEach { 
                    content(it)
                }
                if (it.size < numColumn) {
                    repeat(numColumn - it.size) {
                        Spacer(modifier = Modifier.width(columnWidth))
                    }
                }
            }
        }
    }
}

fun HeaderGridScope.header(content: @Composable BoxScope.() -> Unit) {
    listScope.item {
        Box(
            modifier = Modifier
                .fillMaxWidth(),
           content = content
        )
    }
}

data class HeaderGridScope(val numColumn: Int, val columnWidth: Dp, val listScope: LazyListScope)

sealed class GridCells {
    class Fixed(val count: Int, val minSize: Dp) : GridCells()
    class Adaptive(val minSize: Dp) : GridCells()
}