cssgridgaleristudi-kasusMenengah5 mnt baca

Studi Kasus: Galeri Foto

Galeri responsif tanpa media query memakai auto-fit, minmax, dan item unggulan.

Target

Galeri foto yang: (1) otomatis menyesuaikan jumlah kolom dengan lebar layar, (2) punya satu foto unggulan lebih besar, (3) tidak ada media query sama sekali, (4) gambar tidak gepeng.

Kerangka grid responsif

css

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
  gap: 12px;
}

Satu deklarasi menangani semua ukuran layar: di HP sempit hanya 1-2 kolom yang muat, di desktop bisa 5-6. dense menambal lubang dari foto unggulan.

Foto unggulan

css

.foto-unggulan {
  grid-column: span 2;
  grid-row: span 2;
}

Foto pertama menjadi 2x2. Item lain mengalir mengisi sisanya berkat dense.

Gambar tidak gepeng: object-fit

Masalah klasik galeri: foto beda rasio aspek dipaksa ke petak sama sehingga gepeng atau melar. Solusinya:

css

.galeri img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* potong, jangan gepengkan */
  border-radius: 12px;
  display: block;
}

object-fit: cover memotong foto agar pas mengisi petak tanpa mengubah rasio aspek. (Detail object-fit ada di modul tersendiri.)

Contoh lengkap

html

<div class="galeri">
  <figure class="foto-unggulan">
    <img src="foto1.jpg" alt="Pemandangan utama">
  </figure>
  <figure><img src="foto2.jpg" alt="..."></figure>
  <figure><img src="foto3.jpg" alt="..."></figure>
  <!-- dst -->
</div>

css

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
  gap: 12px;
}

.galeri figure {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
}

.galeri img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.galeri img:hover {
  transform: scale(1.05);
}

.foto-unggulan {
  grid-column: span 2;
  grid-row: span 2;
}

Bonus: efek zoom halus saat hover dengan transisi + transform.

Catatan teknis: figure punya margin bawaan browser yang harus di-nol-kan. Dan ingat dense mengubah urutan visual: untuk galeri foto tidak masalah, tapi jangan pakai untuk konten berurutan penting.

Tips profesional

Tambahkan loading="lazy" pada <img> galeri agar gambar di bawah lipatan tidak diunduh duluan.
Rasio aspek seragam via aspect-ratio: 4 / 3 pada figure + object-fit: cover pada img = galeri rapi tanpa height kaku.
Efek hover zoom: bungkus img dalam figure overflow: hidden, lalu img:hover { transform: scale(1.05); }.

Pola siap salin: galeri portofolio

css

.portofolio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 16px;
}

.portofolio .unggulan {
  grid-column: span 2;
  grid-row: span 2;
}

.portofolio img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 12px;
}

Satu pola untuk galeri portofolio, toko, dan blog foto. Tinggal ganti minmax sesuai kebutuhan.

Rangkuman

Galeri modern = auto-fit + minmax (responsif otomatis) + dense (tampal lubang) + object-fit cover (gambar tidak gepeng) + span untuk unggulan. Tanpa satu pun media query.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Galeri Tanpa Media Query

Ini pola galeri yang dipakai situs portofolio dan toko online modern. Kuasai sekali, pakai selamanya.

Di playground:

Sempitkan preview dan hitung: berapa kolom di lebar 400px vs 900px? Tulis di komentar.
Hapus grid-auto-flow: dense, amati lubang yang muncul di sekitar foto unggulan. Kembalikan.
Tambahkan foto unggulan kedua (class unggulan pada foto lain) dan amati dense menata ulangnya.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox