Composable Function

Grid

A 2D layout composable that arranges children into a grid of rows and columns.

Grid

Common
@Composable
@ExperimentalGridApi
inline fun Grid(
    noinline config: GridConfigurationScope.() -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable GridScope.() -> Unit,
)

A 2D layout composable that arranges children into a grid of rows and columns.

The Grid allows defining explicit tracks (columns and rows) with various sizing capabilities, including fixed sizes (dp), flexible fractions (fr), percentages, and content-based sizing (Auto).

Key Features: * Explicit vs. Implicit: You define the main structure via config (explicit tracks). If items are placed outside these defined bounds, or if auto-placement creates new rows/columns, the grid automatically extends using implicit sizing (defaults to Auto). * Flexible Sizing: Use Fr units (e.g., 1.fr, 2.fr) to distribute available space proportionally among tracks. * Auto-placement: Items without a specific GridScope.gridItem modifier flow automatically into the next available cell based on the configured GridFlow. .

Parameters

config A block that defines the columns, rows, and gaps of the grid. This block runs during the measure pass, enabling efficient updates based on state.
modifier The modifier to be applied to the layout.
content The content of the grid. Direct children can use GridScope.gridItem to configure their position and span.