Coba bayangin satu kartu produk yang dipake di banyak tempat: di sidebar (sempit), di grid main content (sedang), di hero section (lebar). Pengen kartunya adapt sesuai ruang yang ada — bukan sesuai ukuran layar global. Media query gak bisa solve ini, dia cuma tau lebar viewport. Solusinya: Container Queries — fitur CSS modern yang ngecek ukuran PARENT terdekat, bukan layar. Komponen jadi truly reusable, adapt sendiri ke konteks tempat dia dipasang.

🤔 Wishlist 10 tahun. Frontend developer minta fitur ini SEJAK 2015. Akhirnya keluar di Chrome 105 (Sep 2022) dan udah cross-browser stabil di 2024. Salah satu fitur CSS yang paling lama dinanti — sekarang udah aman dipake.

1. Tentukan container:

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

2. Tulis query berdasarkan container:

@container card (min-width: 400px) {
  .card { flex-direction: row; }
}

@container card (max-width: 399px) {
  .card { flex-direction: column; }
}

Container type:

• inline-size — query berdasarkan lebar (paling umum)
• size — query berdasarkan lebar dan tinggi
• normal — default, bukan container

Perbedaan dengan Media Queries:

• Media Queries: berdasarkan ukuran viewport (seluruh layar)
• Container Queries: berdasarkan ukuran parent element

🎭 Analogi sehari-hari

Bayangin meja lipat di rumah. Pas dipake di ruang tamu yang luas, bisa dibuka penuh buat 6 orang. Pas dipindah ke pojokan dapur sempit, otomatis jadi mode meja kecil 2 orang. Mejanya cerdas — adapt ke ruang yang ditempatin, bukan ke ukuran rumah keseluruhan. Container query gitu juga: kartu yang sama, kalau dipasang di sidebar sempit jadi layout vertikal, kalau dipasang di main content lega jadi horizontal. Beda sama media query yang cuma ngintip ukuran layar global, container query ngintip kotak parent terdekat.

⚠️ Jebakan yang sering ditemui

• Lupa container-type di parent = @container tidak jalan.
• container-type: size vs inline-size — size query 2D (jarang), inline-size cuma width (umum).
• container-type BIKIN containment = parent width/height jadi independen dari child — bisa break layout existing.
• Query unit cqw/cqi/cqh/cqb untuk dimensi container.
• Browser support modern (2023+). 2026 = aman.
• Cannot query parent itself — query relatif ancestor container, bukan self.

TL;DR: Container Queries = adapt komponen ke ukuran PARENT, bukan viewport. Bikin komponen truly reusable. Setup: container-type: inline-size di parent, lalu @container (min-width: 400px) { ... }. Beda dari media query yang cek seluruh layar. Bonus: cqw/cqi units untuk dimensi container. Browser support modern (2023+) udah aman.