Container queries là gì?

Container query cho component đáp ứng theo bề rộng của khối cha, không phải theo viewport.

/* 1. đánh dấu element làm container */
.card-wrap {
  container-type: inline-size;
  container-name: card;        /* tuỳ chọn, cần khi có nhiều container lồng nhau */
}

/* 2. query theo container đó */
@container card (min-width: 400px) {
  .card { display: grid; grid-template-columns: 120px 1fr; }
}

Lợi ích thực tế: cùng một component đặt trong sidebar 300px và trong vùng nội dung 900px sẽ tự hiển thị khác nhau — media query không làm được, vì viewport trong cả hai trường hợp là như nhau.

Đơn vị đi kèm: cqw, cqh, cqi, cqb — phần trăm kích thước container.

.card h3 { font-size: clamp(1rem, 5cqi, 1.5rem); }

Từ 2023 còn có style query — đáp ứng theo giá trị của custom property:

@container style(--featured: true) { .card { border-color: var(--amber); } }

Hỗ trợ: Baseline 2023 (Chrome 105+, Safari 16+, Firefox 110+).

Lưu ý: container-type: inline-size tạo containment cho trục ngang, nghĩa là container không còn co theo nội dung theo chiều đó. Đặt nhầm lên chính element cần đo cũng khiến query không bao giờ khớp — luôn đặt lên element bọc ngoài, không đặt lên element đang style.