CSS Container Queries: Responsive Design Tanpa Media Query

Container queries bikin komponen truly reusable — desain yang adaptif berdasarkan lebar parent container, bukan viewport. Tutorial + contoh kode nyata untuk implementasi hari ini.

Kenapa Media Query Sudah Tidak Cukup

Sebelum masuk ke container queries, kita perlu memahami kenapa responsive design berbasis viewport (@media) mulai terasa limitasi-nya — terutama kalau lo membangun komponen yang harus tampil beda di konteks berbeda, bukan di breakpoint halaman.

Problem inti: media query berbasis viewport, bukan komponen. Card yang di sidebar (lebar ~250px) dan card di main content (lebar ~700px) butuh styling berbeda — tapi dengan media query lo tidak bisa achieve ini tanpa bikin class baru atau override yang messy.

Implikasinya fatal untuk component-driven design: komponen yang di-export ke library/module tidak bisa predict konteks tempat dia di-render. Artinya setiap consuming project harus override ulang — counter-productive.

Illustrate: bayangkan satu komponen card yang dipake di tiga konteks berbeda di halaman yang sama — hero banner (lebar penuh), sidebar (250px), dan content grid (600px). Dengan media query biasa, lo butuh tiga breakpoint berbeda yang tidak pernah align dengan container yang sebenarnya.

Apa Itu Container Queries

Container queries memperkenalkan paradigma baru: stylesheet yang merespons dimensi parent container, bukan viewport browser. Ini mengubah cara kita berpikir tentang komponen — dari "bagaimana komponen ini tampil di halaman" menjadi "bagaimana komponen ini tampil given container yang dia tempati."

Definisi: @container rule — style berubah berdasarkan lebar parent container.

Konsep contain: wajib declarasikan container-type: inline-size (atau size) di parent element sebelum child bisa pakai container query.

Sintaks:

/* Parent container — wajib declarasikan dulu */
.card-wrapper {
  container-type: inline-size;
}

/* Child query — bereaksi terhadap parent, bukan viewport */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Perbandingan dengan @media: viewport-based vs container-based. Sederhananya — media query tanya "viewport-nya berapa?", container query tanya "container parent-nya berapa?".

Browser support 2026: Chrome 105+, Firefox 110+, Safari 16+. Global support ~92%+ (caniuse, mid-2026). Progressive enhancement tetap jadi best practice untuk enterprise/legacy.

Implementasi Dasar dalam 3 Contoh Nyata

Theory itu bagus, tapi container query tanpa contoh kode itu meaningless. Tiga contoh yang bisa lo copy-paste ke project mana pun.

Contoh 1 — Card Component: List View → Grid View

Parent dengan container-type: inline-size, child card berubah dari stacked → side-by-side berdasarkan container width:

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

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@container card (min-width: 700px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Contoh 2 — Sidebar: Collapsed → Expanded

Use case: dashboard layout, CMS sidebar, navigation panel:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

.sidebar-nav-item {
  display: none;
}

.sidebar-icon {
  display: flex;
}

@container sidebar (min-width: 200px) {
  .sidebar-nav-item {
    display: flex;
  }
}

Contoh 3 — Heading: Font Size Berdasarkan Container

Heading yang scales berdasarkan parent width — clamp() + container query unit untuk fluid typography scoped ke container:

.content-block {
  container-type: inline-size;
}

.content-block h2 {
  font-size: clamp(1rem, 4cqi, 2rem);
}

@container (min-width: 600px) {
  .content-block h2 {
    font-size: 1.75rem;
  }
}

Container Query Units — Satuan Ukuran Baru di CSS

Selain @container rule, CSS juga memperkenalkan satuan ukuran baru yang berbasis container — analog dengan vw/vh tapi untuk container. Satuan ini bikin typography dan spacing yang truly container-aware tanpa harus hardcode breakpoint.

Satuan yang tersedia:

• cqi — container inline query (persen dari lebar container)
• cqb — container block query (persen dari tinggi container)
• cqw — container width (1cqw = 1% lebar container)
• cqh — container height
• cqmin — nilai minimum dari cqi atau cqb
• cqmax — nilai maksimum dari cqi atau cqb

Use case utama: font-size yang scales relatif terhadap container — bukan viewport.

Comparison: em (font-based, relatif ke font size element itu sendiri), % (viewport-based/page-based), cqi (container-based).

/* font size minimum 1rem, maksimum 2rem, range dihitung dari 3% lebar container */
.card-title {
  font-size: clamp(1rem, 3cqi, 2rem);
}

Catatan: container query units masih relatif baru — monitor browser support untuk use case mission-critical.

Praktik Terbaik — Kapan Pakai Container Query, Kapan Tetap Media Query

Container query bukan replacement untuk media query — mereka complement. Mengerti kapan pakai yang mana adalah kunci supaya codebase tetap maintainable dan tidak over-engineered.

Pakai container query untuk:

• Komponen reusable (card, button, nav item)
• Layout modules yang dipake di banyak konteks berbeda
• Design system / component library

Pakai media query untuk:

• Page-level layout (grid utama, kolom sidebar)
• Breakpoint utama (mobile/tablet/desktop)
• Hal yang memang bergantung pada viewport (sticky header, full-screen overlay)

Kombinasi: container query di dalam media query breakpoint — page-level tentukan struktur macro, container-level tentukan komponen behavior.

Pitfall umum: jangan over-engineer. Kalau komponen hanya dipake di satu konteks, media query biasa sudah cukup.

Checklist: sebelum pakai container query, tanya — "apakah komponen ini akan dipake di konteks berbeda dengan container width berbeda?" Kalau tidak, media query cukup.

Fallback untuk Browser Lama + Progressive Enhancement

Meskipun browser support sudah bagus di 2026, ada kemungkinan userbase lo masih punya segmen yang pakai browser lama (enterprise environments, old mobile devices). Progressive enhancement approach memastikan semua orang dapat usable experience.

CSS Feature Queries:

@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }
  /* Container query styles di sini */
}

Strategy 1: Mobile-first base styles → container query override untuk browser yang support.

Strategy 2: Base layout dengan media query → tambah container query behavior sebagai enhancement layer.

Tooling: PostCSS plugin postcss-container-queries untuk transpiling ke fallback — optional, evaluate need berdasarkan userbase.

TL;DR: container query bukan critical path — base experience tanpa container query tetap functional.

Container queries menyelesaikan masalah yang sudah lama menggelisahkan frontend developer: komponen yang truly context-aware. Tidak perlu lagi hack CSS untuk bikin card behave beda di sidebar vs main content.

Step pertama: pilih satu komponen di project lo yang sering dipake di konteks berbeda → implement container query sebagai eksperimen → rasakan bedanya.