# GridConfigurationScope

Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Grid.kt+class:androidx.compose.foundation.layout.GridConfigurationScope) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0) Common/AllAndroid/JVM
- Cmn

  ```
  @LayoutScopeMarker
  interface GridConfigurationScope : Density
  ```

*** ** * ** ***

Scope for configuring the structure of a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Grid.composable#Grid(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)`.

This interface is implemented by the configuration block in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Grid.composable#Grid(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)`. It allows defining columns, rows, and gaps.

The order in which `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#column(androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#row(androidx.compose.ui.unit.Dp)` functions are called within the `config` block is important. Tracks are added to the grid definition sequentially based on these calls. For example, calling `column(100.dp)` twice defines two columns.

Gap configuration calls (`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#gap(androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#rowGap(androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#columnGap(androidx.compose.ui.unit.Dp)`) follow a "last-call-wins" policy for their respective axes.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Grid
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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)
    }
}
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Grid
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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")
        }
    }
}
```

## Summary

| ### Public functions |
|---|---|---|
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#area(kotlin.Any,kotlin.ranges.IntRange,kotlin.ranges.IntRange)(areaId: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html, rows: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-range/index.html, columns: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-range/index.html)` Defines a named area within the grid using explicit coordinate ranges. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#area(kotlin.Any,kotlin.Int,kotlin.Int,kotlin.Int,kotlin.Int)(areaId: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html, row: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, column: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, rowSpan: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, columnSpan: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)` Defines a named area or a 1-dimensional track within the grid by mapping an identifier to physical starting coordinates and spans. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#column(kotlin.Float)(percentage: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Defines a percentage-based column. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#column(androidx.compose.ui.unit.Dp)(size: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Defines a fixed-width column. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#column(androidx.compose.foundation.layout.GridTrackSize)(size: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridTrackSize)` Defines a new column track with the specified `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#column(androidx.compose.foundation.layout.GridTrackSize)`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#column(androidx.compose.foundation.layout.Fr)(weight: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr)` Defines a flexible column. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#columnGap(androidx.compose.ui.unit.Dp)(gap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Sets the gap (gutter) size between columns. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#gap(androidx.compose.ui.unit.Dp)(all: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Sets both the row and column gaps (gutters) to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#gap(androidx.compose.ui.unit.Dp)`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#gap(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(row: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, column: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Sets independent gaps for rows and columns. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridTrackSize` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#minmax(androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.Fr)(min: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, max: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr)` A flexible track with an explicitly defined minimum base size and a flexible maximum size. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#row(kotlin.Float)(percentage: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Defines a percentage-based row. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#row(androidx.compose.ui.unit.Dp)(size: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Defines a fixed-width row. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#row(androidx.compose.foundation.layout.GridTrackSize)(size: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridTrackSize)` Defines a new row track with the specified `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#row(androidx.compose.foundation.layout.GridTrackSize)`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#row(androidx.compose.foundation.layout.Fr)(weight: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr)` Defines a flexible row. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#rowGap(androidx.compose.ui.unit.Dp)(gap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Sets the gap (gutter) size between rows. | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#constraints()` The layout constraints passed to this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Grid.composable#Grid(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)` from its parent. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridFlow` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#flow()` The direction in which items that do not specify a position are placed. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr` | `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-double/index.html.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#(kotlin.Double).fr()` Creates an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr` unit from a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-double/index.html`. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr` | `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#(kotlin.Float).fr()` Creates an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr` unit from a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html`. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr` | `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#(kotlin.Int).fr()` Creates an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr` unit from an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html`. | Cmn |

| ### Extension functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#(androidx.compose.foundation.layout.GridConfigurationScope).columns(kotlin.Array)(vararg specs: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridTrackSpec)` Adds multiple columns with the specified `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.GridConfigurationScope).columns(kotlin.Array)`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#(androidx.compose.foundation.layout.GridConfigurationScope).rows(kotlin.Array)(vararg specs: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridTrackSpec)` Adds multiple rows with the specified `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.GridConfigurationScope).rows(kotlin.Array)`. | Cmn |

### Inherited functions

From [androidx.compose.ui.unit.Density](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density) `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.Dp).roundToPx()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` by rounding
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.TextUnit).roundToPx()()`

Convert Sp to `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` by rounding
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Int).toDp()()`

Convert an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` pixel value to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Float).toDp()()`

Convert a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` pixel value to a Dp
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize` `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.geometry.Size).toDpSize()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize`.
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.Dp).toPx()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to pixels.
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.TextUnit).toPx()()`

Convert Sp to pixels.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpRect.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.DpRect).toRect()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpRect` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.DpSize).toSize()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Int).toSp()()`

Convert an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` pixel value to Sp.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Float).toSp()()`

Convert a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` pixel value to a Sp
Cmn From [androidx.compose.ui.unit.FontScaling](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling) `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#(androidx.compose.ui.unit.TextUnit).toDp()()`

Convert Sp to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#(androidx.compose.ui.unit.Dp).toSp()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to Sp.
Cmn

### Inherited properties

From [androidx.compose.ui.unit.Density](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#density()`

The logical density of the display.
Cmn From [androidx.compose.ui.unit.FontScaling](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#fontScale()`

Current user preference for the scaling factor for fonts.
Cmn

## Public functions

### area

Cmn Added in [1.12.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.12.0)

```
open fun area(areaId: Any, rows: IntRange, columns: IntRange): Unit
```

Defines a named area within the grid using explicit coordinate ranges.

This is a convenience overload that computes the starting coordinate and span based on the provided `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-range/index.html` boundaries.

Example: `area(AppArea.Footer, rows = 2..3, columns = 1..2)` is functionally equivalent to `area(AppArea.Footer, row = 2, column = 1, rowSpan = 2, columnSpan = 2)`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Grid
import androidx.compose.foundation.layout.columns
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.rows
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Grid(
    modifier = Modifier.fillMaxSize().padding(16.dp),
    config = {
        repeat(4) { column(1.fr) }
        repeat(4) { row(1.fr) }

        // Easily define a 2x2 area right in the center using IntRanges
        area("CenterBox", rows = 2..3, columns = 2..3)
    },
) {
    Box(
        modifier = Modifier.gridItem("CenterBox").background(Color.Blue).fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Text("I span rows 2-3 and columns 2-3", color = Color.White)
    }
}
```

| Parameters |
|---|---|
| `areaId: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html` | A user-defined identifier (e.g., an Enum, String, or object marker) that represents this area. |
| `rows: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-range/index.html` | The range of rows to occupy (e.g., `1..2`). The start determines the 1-based row index, and the size of the range determines the span. |
| `columns: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-range/index.html` | The range of columns to occupy (e.g., `1..3`). The start determines the 1-based column index, and the size of the range determines the span. |

### area

Cmn Added in [1.12.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.12.0)

```
fun area(
    areaId: Any,
    row: Int = GridIndexUnspecified,
    column: Int = GridIndexUnspecified,
    rowSpan: Int = 1,
    columnSpan: Int = 1
): Unit
```

Defines a named area or a 1-dimensional track within the grid by mapping an identifier to physical starting coordinates and spans.

Once defined, this identifier can be referenced by child composables using `Modifier.gridItem(areaId)` to place them into this specific area. This decouples a component's semantic intent from its exact physical layout coordinates.

**1D Areas \& Flow:** To create a 1-dimensional track, explicitly pass `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridScope#GridIndexUnspecified()` to the dimension you want to auto-flow. For example, `area("Header", row = 1, column = GridIndexUnspecified)` restricts the area to the first row, allowing multiple items placed into it to automatically flow side-by-side into available columns.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Grid
import androidx.compose.foundation.layout.columns
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.rows
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Grid(
    modifier = Modifier.fillMaxSize().padding(16.dp),
    config = {
        // 1. Define Physical Tracks
        column(100.dp) // Sidebar track
        column(1.fr) // Main content track

        row(60.dp) // Header track
        row(1.fr) // Main content track
        row(50.dp) // Footer track

        gap(8.dp)

        // 2. Map Semantic Strings to physical coordinates
        area("header", row = 1, column = 1, columnSpan = 2)
        area("sidebar", row = 2, column = 1)
        area("content", row = 2, column = 2)
        area("footer", rows = 3..3, columns = 1..2)
    },
) {
    // 3. Place items purely by semantic intent!
    Box(
        modifier = Modifier.gridItem("header").background(Color.DarkGray).fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Text("Header", color = Color.White)
    }

    Box(
        modifier = Modifier.gridItem("sidebar").background(Color.LightGray).fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Text("Sidebar")
    }

    Box(
        modifier = Modifier.gridItem("content").background(Color.Cyan).fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Text("Main Content")
    }

    Box(
        modifier = Modifier.gridItem("footer").background(Color.Gray).fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Text("Footer", color = Color.White)
    }
}
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Grid
import androidx.compose.foundation.layout.columns
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Grid(
    modifier = Modifier.fillMaxSize().padding(16.dp),
    config = {
        // 1. Define physical tracks
        column(100.dp) // Sidebar track
        column(1.fr) // Main content track

        row(60.dp) // Header track
        row(1.fr) // Main content track

        gap(8.dp)

        // 2. Define 1-Dimensional Areas
        // 1D Area: Fix the row, leave column unspecified
        area("header", row = 1)

        // 1D Area: Fix the column, leave row unspecified
        area("sidebar", column = 1)

        // Fully specified 2D area
        area("content", row = 2, column = 2)
    },
) {
    // Because "header" is 1D, items automatically flow into available columns!
    // Logo takes the first available slot (row 1, col 1)
    Box(
        modifier = Modifier.gridItem("header").background(Color.Red).fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Text("Logo", color = Color.White)
    }

    // Search automatically flows into the next available slot (row 1, col 2)
    Box(
        modifier = Modifier.gridItem("header").background(Color.Magenta).fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Text("Search Bar", color = Color.White)
    }

    // Because "sidebar" is 1D (col=1), it flows into the next available row.
    // Since (row 1, col 1) is taken by Logo, this flows to (row 2, col 1).
    Box(
        modifier = Modifier.gridItem("sidebar").background(Color.Blue).fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Text("Sidebar Menu", color = Color.White)
    }

    // Exact 2D placement
    Box(
        modifier = Modifier.gridItem("content").background(Color.Green).fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Text("Main Content", color = Color.White)
    }
}
```

| Parameters |
|---|---|
| `areaId: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html` | A user-defined identifier (e.g., an Enum, String, or object marker) that represents this area. This identifier **must** have a stable `equals()` and `hashCode()`. |
| `row: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = GridIndexUnspecified` | The 1-based starting row index of the area. Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridScope#GridIndexUnspecified()` to create a 1D column-based area where items flow vertically. |
| `column: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = GridIndexUnspecified` | The 1-based starting column index of the area. Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridScope#GridIndexUnspecified()` to create a 1D row-based area where items flow horizontally. |
| `rowSpan: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 1` | The number of rows this area should occupy. Must be greater than 0. Defaults to 1. |
| `columnSpan: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 1` | The number of columns this area should occupy. Must be greater than 0. Defaults to 1. |

| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | if both `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#area(kotlin.Any,kotlin.Int,kotlin.Int,kotlin.Int,kotlin.Int)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#area(kotlin.Any,kotlin.Int,kotlin.Int,kotlin.Int,kotlin.Int)` are `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridScope#GridIndexUnspecified()`. |

### column

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun column(percentage: @FloatRange(from = 0.0, to = 1.0) Float): Unit
```

Defines a percentage-based column. Maps to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridTrackSize#Percentage(kotlin.Float)`.

| Parameters |
|---|---|
| `percentage: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | The percentage (0.0 to 1.0) of the available space. |

### column

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun column(size: Dp): Unit
```

Defines a fixed-width column. Maps to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridTrackSize#Fixed(androidx.compose.ui.unit.Dp)`.

### column

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun column(size: GridTrackSize): Unit
```

Defines a new column track with the specified `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#column(androidx.compose.foundation.layout.GridTrackSize)`.

### column

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun column(weight: Fr): Unit
```

Defines a flexible column. Maps to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridTrackSize#Flex(androidx.compose.foundation.layout.Fr)`.

### columnGap

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun columnGap(gap: Dp): Unit
```

Sets the gap (gutter) size between columns.

**Precedence:** If this is called multiple times, the **last call** takes precedence. This call will overwrite the column component of any previous `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#columnGap(androidx.compose.ui.unit.Dp)` call.

| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#columnGap(androidx.compose.ui.unit.Dp)` is negative. |

### gap

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun gap(all: Dp): Unit
```

Sets both the row and column gaps (gutters) to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#gap(androidx.compose.ui.unit.Dp)`.

**Precedence:** If this is called multiple times, or mixed with `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#columnGap(androidx.compose.ui.unit.Dp)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#rowGap(androidx.compose.ui.unit.Dp)`, the **last call** takes precedence.

| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#gap(androidx.compose.ui.unit.Dp)` is negative. |

### gap

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun gap(row: Dp, column: Dp): Unit
```

Sets independent gaps for rows and columns.

**Precedence:** If this is called multiple times, or mixed with `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#columnGap(androidx.compose.ui.unit.Dp)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#rowGap(androidx.compose.ui.unit.Dp)`, the **last call** takes precedence.

| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#gap(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#gap(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` is negative. |

### minmax

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
open fun minmax(min: Dp, max: Fr): GridTrackSize
```

A flexible track with an explicitly defined minimum base size and a flexible maximum size. Conceptually, this behaves identically to the CSS Grid `minmax(min, max)` function.

**Usage with Lazy Lists:** Because `minmax` relies on a predefined `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#minmax(androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.Fr)` size (e.g., `0.dp`), it entirely bypasses the intrinsic measurement pass. This makes it the **required** choice when placing `SubcomposeLayout`-backed components (such as `LazyColumn` or `LazyRow`) inside a flexible grid track.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Grid
import androidx.compose.foundation.layout.GridTrackSize
import androidx.compose.foundation.layout.columns
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Grid(
    modifier = Modifier.fillMaxSize().padding(16.dp),
    config = {
        column(120.dp) // Sidebar width
        column(minmax(0.dp, 1.fr)) // Content width

        row(60.dp) // Header height
        // IMPORTANT:
        // Flex track '1.fr' queries child intrinsic sizes. Since SubcomposeLayouts
        // (like LazyColumn) crash on intrinsic queries, we MUST use 'GridTrackSize.MinMax' with
        // an explicit minimum size (0.dp) to bypass the measurement crash safely!
        row(minmax(0.dp, 1.fr))

        gap(16.dp)
    },
) {
    // Top Header spanning both columns
    Box(
        Modifier.gridItem(row = 1, column = 1, columnSpan = 2)
            .background(Color.DarkGray)
            .fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Text("App Header", color = Color.White)
    }

    // Left Sidebar
    Box(
        Modifier.gridItem(row = 2, column = 1).background(Color.LightGray).fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Text("Navigation")
    }

    // Scrollable LazyColumn safely constrained in the flex area
    LazyColumn(
        modifier = Modifier.gridItem(row = 2, column = 2).fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        items(50) { index ->
            Box(Modifier.fillMaxWidth().background(Color(0xFFE0E0FF)).padding(16.dp)) {
                Text("Scrollable Content #$index")
            }
        }
    }
}
```

| Parameters |
|---|---|
| `min: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The explicit minimum fixed base size (e.g., `0.dp`). |
| `max: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr` | The maximum flexible distribution weight (e.g., `1.fr`). |

### row

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun row(percentage: @FloatRange(from = 0.0, to = 1.0) Float): Unit
```

Defines a percentage-based row. Maps to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridTrackSize#Percentage(kotlin.Float)`.

| Parameters |
|---|---|
| `percentage: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | The percentage (0.0 to 1.0) of the available space. |

### row

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun row(size: Dp): Unit
```

Defines a fixed-width row. Maps to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridTrackSize#Fixed(androidx.compose.ui.unit.Dp)`.

### row

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun row(size: GridTrackSize): Unit
```

Defines a new row track with the specified `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#row(androidx.compose.foundation.layout.GridTrackSize)`.

### row

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun row(weight: Fr): Unit
```

Defines a flexible row. Maps to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridTrackSize#Flex(androidx.compose.foundation.layout.Fr)`.

### rowGap

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun rowGap(gap: Dp): Unit
```

Sets the gap (gutter) size between rows.

**Precedence:** If this is called multiple times, the **last call** takes precedence. This call will overwrite the row component of any previous `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#rowGap(androidx.compose.ui.unit.Dp)` call.

| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridConfigurationScope#rowGap(androidx.compose.ui.unit.Dp)` is negative. |

## Public properties

### constraints

Cmn

```
val constraints: Constraints
```

The layout constraints passed to this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Grid.composable#Grid(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)` from its parent.

These constraints represent the minimum and maximum size limits that the parent has imposed on this Grid. This can be useful for creating responsive layouts that adapt based on available space.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` |   |

### flow

Cmn

```
var flow: GridFlow
```

The direction in which items that do not specify a position are placed. Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/GridFlow#Row()`.

### Double.fr

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Grid.kt+symbol:fr)

```
open val Double.fr: Fr
```

Creates an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr` unit from a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-double/index.html`.

### Float.fr

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Grid.kt+symbol:fr)

```
open val Float.fr: Fr
```

Creates an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr` unit from a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html`.

### Int.fr

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Grid.kt+symbol:fr)

```
open val Int.fr: Fr
```

Creates an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Fr` unit from an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html`.

## Extension functions

### GridConfigurationScope.columns

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Grid.kt+function:columns)

```
fun GridConfigurationScope.columns(vararg specs: GridTrackSpec): Unit
```

Adds multiple columns with the specified `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.GridConfigurationScope).columns(kotlin.Array)`.

### GridConfigurationScope.rows

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Grid.kt+function:rows)

```
fun GridConfigurationScope.rows(vararg specs: GridTrackSpec): Unit
```

Adds multiple rows with the specified `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.GridConfigurationScope).rows(kotlin.Array)`.