GridConfigurationScope

GridConfigurationDslSample

@Composable
@OptIn(ExperimentalGridApi::class)
fun GridConfigurationDslSample() {
    Grid(
        config = {
            // This defines the first column
            column(100.dp)
            // This defines the second column
            column(1.fr)
            // This defines the first row
            row(50.dp)
            // The order is important. additional calls to row() or column() append tracks.
            gap(all = 8.dp) // Set both row and column gaps
            columnGap(16.dp) // Override column gap
        }
    ) {
        Box(
            modifier = Modifier.gridItem(row = 1, column = 1).background(Color.Blue).fillMaxSize(),
            contentAlignment = Alignment.Center,
        ) {
            Text("Row: 1, Column: 1", color = Color.White)
        }
        Box(
            modifier = Modifier.gridItem(row = 1, column = 1).background(Color.Blue).fillMaxSize(),
            contentAlignment = Alignment.Center,
        ) {
            Text("Row: 1, Column: 2", color = Color.White)
        }
    }
}

GridWithConstraints

@Composable
@OptIn(ExperimentalGridApi::class)
fun GridWithConstraints() {
    Grid(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        config = {
            val maxWidthDp = constraints.maxWidth.toDp()
            if (maxWidthDp < 600.dp) {
                // Compact Layout: 2 Columns
                repeat(2) { column(1.fr) }
            } else {
                // Expanded Layout: 4 Columns
                repeat(4) { column(1.fr) }
            }
            // Rows are auto-generated based on content
            gap(8.dp)
        },
    ) {
        repeat(8) { index ->
            Box(
                modifier = Modifier.background(Color.Cyan).padding(24.dp),
                contentAlignment = Alignment.Center,
            ) {
                Text("Item $index")
            }
        }
    }
}