Container Queries (@container): Desain Modular Komponen

Gantikan ketergantungan pada lebar viewport layar dengan Container Queries modern (@container), di mana gaya kartu menyesuaikan dengan lebar induk kontainernya sendiri.

Media query (@media) hanya memeriksa ukuran layar perangkat. Container Queries (@container) memungkinkan sebuah kartu komponen memiliki layout berbeda saat diletakkan di sidebar yang sempit vs di area utama yang luas.

/* 1. Daftarkan kontainer induk */
.kartu-wrapper {
  container-type: inline-size;
  container-name: kartuKomponen;
}

/* 2. Responsif terhadap ukuran kontainer induk */
@container kartuKomponen (min-width: 400px) {
  .kartu-isi {
    display: flex;
    flex-direction: row;
    gap: 16px;
  }
}