Halaman ini diterjemahkan oleh Cloud Translation API.

Petak

Tampilan grid menampilkan dua kolom atau lebih gambar yang mewakili item konten, dengan teks singkat di bawah setiap gambar. Tampilan ini paling baik digunakan ketika pengguna terutama mengandalkan gambar untuk membuat pilihan mereka.

Grid dapat digulir secara vertikal dan ukurannya, jarak antar kolom, serta jumlah kolomnya dapat bervariasi. Konten dalam grid juga dapat dikelompokkan ke dalam kategori.

Komponen daftar item

Daftar memberikan cara alternatif untuk menampilkan konten yang membutuhkan teks penjelasan lebih lanjut.

Anatomi

Grid berisi teks dan kontrol UI. Karena pengguna harus meresponsnya, grid tidak boleh terhalang, baik oleh elemen lain maupun oleh tepi layar.

Spesifikasi

Komponen daftar item

Spesifikasi, panduan gaya, dan lainnya.

Kisi-kisi konten (3 atau 4 kolom)

Kisi aplikasi (4 kolom)

Tampilan grid aplikasi dengan item yang sering digunakan di baris atas.

Penempatan ikon indikator dalam tata letak grid

Tata letak yang dapat diskalakan

Tata letak referensi ini menunjukkan cara menyesuaikan grid untuk mengakomodasi layar dengan berbagai lebar dan tinggi. Perhatikan bahwa semua nilai piksel adalah dalam piksel yang dirender, sebelum terjadi pengurangan atau peningkatan resolusi.

Layar dengan lebar standar

Layar lebar

Layar ekstra lebar dan super lebar

Penataan vertikal grid aplikasi pada layar dengan berbagai ketinggian.

Gaya

Tipografi

Warna

Perekat

Ketinggian

Contoh