컨테이너 쿼리: 미디어 쿼리로는 부족한 순간

flowchart TD
    q["카드의 레이아웃을 언제 바꿀까?"]
    q --> media["미디어 쿼리<br/>= 뷰포트 폭을 본다"]
    q --> container["컨테이너 쿼리<br/>= 부모(컨테이너) 폭을 본다"]
 
    media --> mp["뷰포트 1440px<br/>→ '넓다'고 판단"]
    mp --> mfail["사이드바(280px) 안의<br/>카드까지 좌우 배치로<br/>→ 깨짐"]
 
    container --> cp["부모가 280px<br/>→ '좁다'고 판단"]
    cp --> cok["사이드바 카드는 세로 배치<br/>본문 카드는 좌우 배치<br/>→ 각자 맞게"]
 
    style mfail fill:#fee2e2,stroke:#ef4444,color:#111
    style cok fill:#dcfce7,stroke:#22c55e,color:#111

/* 1. 부모를 컨테이너로 등록 */
.card-slot {
  container-type: inline-size;
  /* 필요하면 이름도 부여 */
  container-name: card;
}
 
/* 2. 자식에서 컨테이너 폭 기준으로 조건 */
.card {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr; /* 기본: 세로 배치 */
}
 
@container card (min-width: 400px) {
  .card {
    grid-template-columns: 160px 1fr; /* 컨테이너가 400px 이상이면 좌우 배치 */
  }
}

@container card (min-width: 400px) {
  .card-title {
    /* 컨테이너 폭에 비례하되, 2편처럼 상·하한을 건다 */
    font-size: clamp(1rem, 5cqi, 1.5rem);
  }
}

/* ProductCard.module.css */
.slot {
  container-type: inline-size;
}
 
.card {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr; /* 좁을 때: 이미지 위, 텍스트 아래 */
}
 
.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
 
/* 컨테이너가 380px 이상이면 좌우 배치로 전환 */
@container (min-width: 380px) {
  .card {
    grid-template-columns: 140px 1fr;
    align-items: center;
  }
  .thumb {
    aspect-ratio: 1 / 1;
  }
}

import styles from './ProductCard.module.css';
 
type Product = { title: string; price: string; image: string };
 
export function ProductCard({ product }: { product: Product }) {
  return (
    <div className={styles.slot}>
      <article className={styles.card}>
        <img className={styles.thumb} src={product.image} alt="" />
        <div>
          <h3>{product.title}</h3>
          <p>{product.price}</p>
        </div>
      </article>
    </div>
  );
}

export function Page() {
  return (
    <div className="layout">
      <main style={{ width: '640px' }}>
        {/* 넓은 컨테이너 → 자동으로 좌우 배치 */}
        <ProductCard product={product} />
      </main>
      <aside style={{ width: '280px' }}>
        {/* 좁은 컨테이너 → 자동으로 세로 배치 */}
        <ProductCard product={product} />
      </aside>
    </div>
  );
}

● 본문(640px) 안의 카드 — 컨테이너가 넓음 → 좌우 배치
+---------------------------------+
| +-------+  제목                 |
| | 이미지|  가격                 |
| +-------+                       |
+---------------------------------+
 
● 사이드바(280px) 안의 카드 — 컨테이너가 좁음 → 세로 배치
+----------------+
| +------------+ |
| |   이미지   | |
| +------------+ |
| 제목           |
| 가격           |
+----------------+

// 플러그인 설치 후: 부모에 @container, 자식에 컨테이너 브레이크포인트 접두사(@sm 등)
export function ProductCard({ product }: { product: Product }) {
  return (
    <div className="@container">
      <article className="grid grid-cols-1 gap-3 @sm:grid-cols-[140px_1fr] @sm:items-center">
        <img
          className="aspect-video w-full object-cover @sm:aspect-square"
          src={product.image}
          alt=""
        />
        <div>
          <h3>{product.title}</h3>
          <p>{product.price}</p>
        </div>
      </article>
    </div>
  );
}