Jetpack Compose Academy · Pelajaran

Sel Grid Adaptif vs Tetap

Buat grid responsif terhadap lebar layar.

Sel Grid Adaptif vs Tetap adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Two Ways to Size Cells

A grid needs to know how wide its columns are. Compose offers two strategies: Fixed column counts and Adaptive minimum widths. 📐

Fixed Recap

You already met GridCells.Fixed(n). It always shows n columns, so cells grow or shrink to fit the screen width.

columns = GridCells.Fixed(3)

The Problem With Fixed

On a phone, 3 columns look great. On a tablet, those same 3 columns become awkwardly wide. Fixed does not adapt to bigger screens.

Enter Adaptive

With GridCells.Adaptive(minSize), you specify a minimum cell width. Compose fits as many columns as possible, then stretches them to fill.

columns = GridCells.Adaptive(minSize = 120.dp)

How Adaptive Counts

Compose divides the available width by your minSize to decide the column count. A wider screen simply gets more columns, automatically.

Responsive by Default

Adaptive grids look right on phones, foldables, and tablets without any extra code. One minSize value handles every screen. 📱

Choosing a minSize

Pick a minSize that keeps content readable at its smallest. Too tiny and cells feel cramped; too large and small phones show one column.

GridCells.Adaptive(minSize = 96.dp)

When Fixed Still Wins

Use Fixed when the design demands an exact count, like a 7-day calendar week that must always be 7 columns wide.

GridCells.Fixed(7)

Mixing With Spacing

Both strategies pair with arrangements. The minSize in Adaptive is measured before spacing, so leave room for your gaps.

LazyVerticalGrid(
    columns = GridCells.Adaptive(120.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) { }

LazyHorizontalGrid Too

The same Fixed and Adaptive cells work in LazyHorizontalGrid, which scrolls sideways and fills rows top to bottom.

LazyHorizontalGrid(rows = GridCells.Adaptive(80.dp)) { }

A Simple Rule

Default to Adaptive for content galleries so they scale across devices. Reserve Fixed for layouts that need a precise, meaningful column count.

Quick Check

Pick the responsive choice.

Recap: Sizing Cells

You compared Fixed exact counts with Adaptive minimum widths. Adaptive scales across devices; Fixed locks an intentional column count. 🎯

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Sel Grid Adaptif vs Tetap” gratis?

Ya — teks lengkap “Sel Grid Adaptif vs Tetap” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Sel Grid Adaptif vs Tetap”?

Buat grid responsif terhadap lebar layar. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Sel Grid Adaptif vs Tetap” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy