Component-based Responsive Design

Desain responsif klasik menautkan setiap keputusan layout ke ukuran layar: satu media query mengatur ulang seluruh halaman, dan komponen terpaksa ikut bertanya “seberapa lebar jendelanya?” — padahal yang menentukan kenyamanan sebuah komponen adalah seberapa lebar ruang yang diberikan kepadanya. Selama ini jarak antara keduanya disubstitusi dengan asumsi: kolom utama pasti lebar di desktop, sidebar pasti sempit. Asumsi semacam itu sering meleset ketika komponen dipindah ke layout lain. Container query menutup jarak tersebut dengan membalik arah pertanyaan, dan pada Chapter ini kita menyatukan seluruh bekal — container types, size queries, dan satuan cq — menjadi pendekatan desain berbasis komponen yang portabel.

Media Query vs Container Query #

Keduanya bukan saingan, melainkan alat untuk lapisan yang berbeda:

Peraturan praktisnya: media query tetap mengurus struktur halaman — jumlah kolom grid, tampilan navigasi, skala tipografi dasar (lihat section Responsive Design ) — sedangkan container query mengurus penyesuaian di dalam komponen. Dengan pembagian tugas ini, komponen tidak perlu tahu di halaman mana ia ditempatkan.

Kartu Portabel antar Slot #

Contoh berikut memasang markup kartu yang identik di dua slot dengan lebar berbeda. Kartu menyusun dirinya secara vertikal di slot sempit dan berbaris di slot lebar:

.slot {
  container-type: inline-size;
}
.slot-samping { width: 300px; }
.slot-utama  { width: 600px; }

.kartu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.kartu h3 { font-size: 16px; }

@container (min-width: 400px) {
  .kartu {
    flex-direction: row;
    align-items: center;
  }
  .kartu h3 { font-size: 24px; }
}

Mari kita telaah pola di atas:

1. Baris 1–4 (.slot): setiap slot layout dinyatakan sebagai container inline-size. Slot adalah satu-satunya hal yang “tahu” posisinya; kartu tidak membawa informasi apa pun tentang lokasinya.
2. Baris 6–11 (.kartu): gaya dasar kartu disusun untuk ruang tersempit yang mungkin — kolom vertikal dengan arah flex-direction column.
3. Baris 13 (.kartu h3): judul diberi ukuran dasar 16px untuk slot sempit.
4. Baris 15–21 (@container): ketika slot mencapai 400px, kartu berbaris (row) dan judul naik menjadi 24px. Perubahan terjadi per komponen, bukan per halaman.

Hasil di Browser:

Slot samping 300px: judul kartu berukuran 16px dengan
flex-direction "column" (gaya dasar).
Slot utama 600px: judul kartu yang sama berukuran 24px dengan
flex-direction "row" (query aktif).

Empat nilai tersebut diprobe otomatis pada demo; markup kartunya sama persis di kedua slot, sehingga yang berubah hanya lingkungannya.

Praktik Membangun Komponen Portabel #

Pola di atas melebar menjadi kebiasaan-kebiasaan berikut saat membangun design system berbasis container query:

• Tulis gaya dasar untuk slot tersempit, lalu naikkan lewat @container (min-width: ...). Setiap query hanya menambah perubahan, bukan menuliskannya ulang.
• Skalakan dengan satuan cq: font-size, padding, dan gap dalam cqi membuat ukuran komponen berubah halus antar-ambang, bukan melompat (lihat Container Query Units ).
• Beri nama container untuk komponen utama agar query tidak salah menangkap container bersarang yang tak terduga.
• Hindari satuan viewport di dalam komponen; 100vw dan vw mengikat komponen kembali ke halaman, justru yang ingin dihindari.
• Uji komponen di dua slot lebar berbeda sebelum dianggap selesai — demo chapter ini memang dirancang sebagai uji seperti itu.
• Tema lewat custom property + style query untuk variasi warna, dengan pengaman @supports sebagaimana dibahas pada Container Style Queries Overview .

Dengan pendekatan ini, responsive design bergeser dari “halaman yang menyesuaikan diri” menjadi “komponen yang menyesuaikan diri di halaman mana pun” — pergeseran yang menjadikan container query fondasi design system modern.