Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

เริ่มใช้งาน

This page describes how to implement basic Grid layouts.

Set up project

Add the androidx.compose.foundation.layout library to your project's lib.versions.toml.

[versions]
compose = "1.12.0-alpha02"

[libraries]
androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }

Add the library dependency to your app's build.gradle.kts.

dependencies {
    implementation(libs.androidx.compose.foundation.layout)
}

Create a basic grid

The following example creates a basic 2x3 grid, with the columns and rows having a fixed size of 100.dp.

Grid(
    config = {
        repeat(2) {
            column(100.dp)
        }
        repeat(3) {
            row(100.dp)
        }
    }
) {
    Card1(containerColor = PastelRed)
    Card2(containerColor = PastelGreen)
    Card3(containerColor = PastelBlue)
    Card4(containerColor = PastelPink)
    Card5(containerColor = PastelOrange)
    Card6(containerColor = PastelYellow)
}DefineGrid.kt

**Figure 1**. A basic grid consists of rows and columns with fixed size.

To learn how to implement more advanced grids, see Set container properties and Set item properties.

ภาพรวม

ตั้งค่าพร็อพเพอร์ตี้ของคอนเทนเนอร์