Grid · Pelajaran 7
Tujuan: Pengguna dapat membuat kisi berkolom sama lebar dengan satuan fr dan fungsi repeat().
Flexbox menata satu sumbu. Grid menata dua sumbu sekaligus: kamu menentukan kolom dan baris, lalu isi menempati selnya.
Satuan fr mewakili satu bagian dari sisa ruang di dalam grid container. Tiga kolom 1fr berarti sisa ruang dibagi rata menjadi tiga.
.galeri {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}repeat(3, 1fr) adalah penulisan singkat dari 1fr 1fr 1fr. Fungsi repeat() menerima jumlah pengulangan dan daftar ukuran yang diulang.
Ubah .galeri menjadi grid tiga kolom sama lebar dengan repeat(3, 1fr) dan jarak antarsel 16px.
Hasil
Pemeriksaan ini mencocokkan kodemu dengan instruksi latihan. Belum ada penilaian kualitas kode secara menyeluruh. Preview menjalankan HTML dan CSS saja, tanpa JavaScript.
Pada grid selebar 900px dengan grid-template-columns: 300px 1fr 1fr, apa arti nilai 1fr?
Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.
Selesaikan latihannya dulu untuk menandai pelajaran ini selesai.
Materi kelas ini diadaptasi dari Microsoft Web Dev for Beginners — 3-terrarium (CSS layout) (MIT), web.dev — Learn CSS, Learn Forms, Learn Accessibility (CC-BY-3.0). Rincian perubahan ada di halaman kelas.