Scope for configuring the structure of a Grid.

This interface is implemented by the configuration block in Grid. It allows defining columns, rows, and gaps.

The order in which column and row 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 (gap, rowGap, columnGap) follow a "last-call-wins" policy for their respective axes.

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.material.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)
    }
}

Summary

Public functions
Unit
column(percentage: @FloatRange(from = 0.0, to = 1.0) Float)

Defines a percentage-based column.
Cmn
Unit
column(size: Dp)

Defines a fixed-width column.
Cmn
Unit

Defines a new column track with the specified size.
Cmn
Unit
column(weight: Fr)

Defines a flexible column.
Cmn
Unit
columnGap(gap: Dp)

Sets the gap (gutter) size between columns.
Cmn
Unit
gap(all: Dp)

Sets both the row and column gaps (gutters) to all.
Cmn
Unit
gap(row: Dp, column: Dp)

Sets independent gaps for rows and columns.
Cmn
Unit
row(percentage: @FloatRange(from = 0.0, to = 1.0) Float)

Defines a percentage-based row.
Cmn
Unit
row(size: Dp)

Defines a fixed-width row.
Cmn
Unit

Defines a new row track with the specified size.
Cmn
Unit
row(weight: Fr)

Defines a flexible row.
Cmn
Unit
rowGap(gap: Dp)

Sets the gap (gutter) size between rows.
Cmn

Public properties
GridFlow

The direction in which items that do not specify a position are placed.
Cmn
open Fr

Creates an Fr unit from a Double.
Cmn
open Fr

Creates an Fr unit from a Float.
Cmn
open Fr

Creates an Fr unit from an Int.
Cmn

Extension functions
Unit

Adds multiple columns with the specified specs.
Cmn
Unit

Adds multiple rows with the specified specs.
Cmn

Inherited functions
From androidx.compose.ui.unit.Density
open Int

Convert Dp to Int by rounding
Cmn
open Int

Convert Sp to Int by rounding
Cmn
open Dp

Convert an Int pixel value to Dp.
Cmn
open Dp

Convert a Float pixel value to a Dp
Cmn
open DpSize

Convert a Size to a DpSize.
Cmn
open Float

Convert Dp to pixels.
Cmn
open Float

Convert Sp to pixels.
Cmn
open Rect

Convert a DpRect to a Rect.
Cmn
open Size

Convert a DpSize to a Size.
Cmn
open TextUnit

Convert an Int pixel value to Sp.
Cmn
open TextUnit

Convert a Float pixel value to a Sp
Cmn
From androidx.compose.ui.unit.FontScaling
Dp

Convert Sp to Dp.
Cmn
TextUnit

Convert Dp to Sp.
Cmn

Inherited properties
From androidx.compose.ui.unit.Density
Float

The logical density of the display.
Cmn
From androidx.compose.ui.unit.FontScaling
Float

Current user preference for the scaling factor for fonts.
Cmn

Public functions

column

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

Defines a percentage-based column. Maps to GridTrackSize.Percentage.

Parameters
percentage: @FloatRange(from = 0.0, to = 1.0) Float

The percentage (0.0 to 1.0) of the available space.

column

Cmn 
fun column(size: Dp): Unit

Defines a fixed-width column. Maps to GridTrackSize.Fixed.

column

Cmn 
fun column(size: GridTrackSize): Unit

Defines a new column track with the specified size.

column

Cmn 
fun column(weight: Fr): Unit

Defines a flexible column. Maps to GridTrackSize.Flex.

columnGap

Cmn 
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 gap call.

Throws
IllegalArgumentException

if gap is negative.

gap

Cmn 
fun gap(all: Dp): Unit

Sets both the row and column gaps (gutters) to all.

Precedence: If this is called multiple times, or mixed with columnGap or rowGap, the last call takes precedence.

Throws
IllegalArgumentException

if all is negative.

gap

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

Sets independent gaps for rows and columns.

Precedence: If this is called multiple times, or mixed with columnGap or rowGap, the last call takes precedence.

Throws
IllegalArgumentException

if row or column is negative.

row

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

Defines a percentage-based row. Maps to GridTrackSize.Percentage.

Parameters
percentage: @FloatRange(from = 0.0, to = 1.0) Float

The percentage (0.0 to 1.0) of the available space.

row

Cmn 
fun row(size: Dp): Unit

Defines a fixed-width row. Maps to GridTrackSize.Fixed.

row

Cmn 
fun row(size: GridTrackSize): Unit

Defines a new row track with the specified size.

row

Cmn 
fun row(weight: Fr): Unit

Defines a flexible row. Maps to GridTrackSize.Flex.

rowGap

Cmn 
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 gap call.

Throws
IllegalArgumentException

if gap is negative.

Public properties

flow

Cmn 
var flow: GridFlow

The direction in which items that do not specify a position are placed. Defaults to GridFlow.Row.

fr

Cmn 
@ExperimentalGridApi
open val Double.fr: Fr

Creates an Fr unit from a Double.

fr

Cmn 
@ExperimentalGridApi
open val Float.fr: Fr

Creates an Fr unit from a Float.

fr

Cmn 
@ExperimentalGridApi
open val Int.fr: Fr

Creates an Fr unit from an Int.

Extension functions

columns

Cmn 
@ExperimentalGridApi
fun GridConfigurationScope.columns(vararg specs: GridTrackSpec): Unit

Adds multiple columns with the specified specs.

rows

Cmn 
@ExperimentalGridApi
fun GridConfigurationScope.rows(vararg specs: GridTrackSpec): Unit

Adds multiple rows with the specified specs.