htmlcssjavascriptgridgaleriPemula9 mnt baca

Grid Galeri Foto

Galeri foto responsif memakai CSS Grid yang otomatis menyesuaikan jumlah kolom.

Kenapa CSS Grid?

Flexbox hebat untuk barisan satu dimensi, tapi galeri butuh dua dimensi (baris DAN kolom). CSS Grid dibuat untuk itu. Satu baris ajaibnya: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). Artinya: "buat kolom sebanyak yang muat, masing-masing minimal 200px". Putar HP atau lebarkan browser, jumlah kolom menyesuaikan sendiri tanpa media query.

Langkah Membangun

HTML: <div class="galeri"> berisi beberapa <figure> (gambar + <figcaption> keterangan).

CSS: Galeri memakai grid ajaib di atas dengan gap: 16px. Setiap figure punya border-radius dan overflow hidden. Efek hover: gambar membesar perlahan (transform: scale(1.05) dengan transisi) seperti galeri Instagram.

JS: Klik gambar menampilkan caption-nya di bawah galeri sebagai "foto terpilih". Sederhana tapi mengajarkan pola klik-untuk-memilih yang dipakai di banyak aplikasi.

Analogi

Grid seperti rak telur: kotaknya otomatis menyesuaikan isi. auto-fill berarti "isi rak sebanyak muatnya", minmax(200px, 1fr) berarti "tiap kotak minimal 200px, selebihnya bagi rata".

Kesalahan Umum

  • Gambar beda-beda tinggi membuat baris tidak rata (paksa aspect-ratio: 1 agar semua kotak).
  • Lupa object-fit: cover sehingga gambar gepeng.
  • Terlalu banyak kolom di HP (minmax 200px otomatis menangani ini).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Filter Kategori Galeri

Tambahkan tombol filter "Semua / Alam / Kota" di atas galeri. Beri tiap figure atribut data-kategori, dan saat tombol diklik hanya figure yang cocok yang tampil.