Staggered Grid Layout

From - 0edb1926ac/Owl/app/src/main/java/com/example/owl/ui/onboarding/Onboarding.kt (L281)

src/main/kotlin/com/looker/droidify/ui/compose/utils/Grid.kt

@@ -0,0 +1,57 @@
+package com.looker.droidify.ui.compose.utils
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.Layout
+import kotlin.math.max
+
+@Composable
+fun StaggeredGrid(
+    modifier: Modifier = Modifier,
+    rows: Int = 3,
+    content: @Composable () -> Unit
+) {
+    Layout(
+        content = content,
+        modifier = modifier
+    ) { measurables, constraints ->
+        val rowWidths = IntArray(rows) { 0 } // Keep track of the width of each row
+        val rowHeights = IntArray(rows) { 0 } // Keep track of the height of each row
+
+        // Don't constrain child views further, measure them with given constraints
+        val placeables = measurables.mapIndexed { index, measurable ->
+            val placeable = measurable.measure(constraints)
+
+            // Track the width and max height of each row
+            val row = index % rows
+            rowWidths[row] += placeable.width
+            rowHeights[row] = max(rowHeights[row], placeable.height)
+
+            placeable
+        }
+
+        // Grid's width is the widest row
+        val width = rowWidths.maxOrNull()?.coerceIn(constraints.minWidth, constraints.maxWidth)
+            ?: constraints.minWidth
+        // Grid's height is the sum of each row
+        val height = rowHeights.sum().coerceIn(constraints.minHeight, constraints.maxHeight)
+
+        // y co-ord of each row
+        val rowY = IntArray(rows) { 0 }
+        for (i in 1 until rows) {
+            rowY[i] = rowY[i - 1] + rowHeights[i - 1]
+        }
+        layout(width, height) {
+            // x co-ord we have placed up to, per row
+            val rowX = IntArray(rows) { 0 }
+            placeables.forEachIndexed { index, placeable ->
+                val row = index % rows
+                placeable.place(
+                    x = rowX[row],
+                    y = rowY[row]
+                )
+                rowX[row] += placeable.width
+            }
+        }
+    }
+}