한 줄 요약 - 컴포넌트가 화면이 아니라 '자기가 담긴 칸' 너비로 반응하는 컨테이너 쿼리(@container)와, 카드들의 줄을 자동으로 맞춰주는 subgrid. 둘 다 주요 브라우저에 안착해 실무에 바로 쓸 수 있습니다.
컨테이너 쿼리
미디어 쿼리는 '화면 전체 너비'만 봅니다. 그래서 같은 카드를 넓은 본문과 좁은 사이드바에 같이 쓰면 한쪽이 깨졌어요. 컨테이너 쿼리는 부모 박스에 container-type 한 줄을 주면, 안쪽 컴포넌트가 그 박스 너비를 보고 레이아웃을 바꿉니다. 카드 코드는 한 벌인데 어디에 놔도 알아서 맞춰져요.
subgrid
가격표나 기능 카드를 늘어놓을 때 제목 길이가 제각각이면 본문과 버튼 줄이 어긋나 지저분했죠. 예전엔 JS로 높이를 재서 맞췄습니다. subgrid는 자식 그리드가 부모의 행/열 선을 그대로 물려받게 해서, 형제 카드끼리 줄이 자동으로 맞습니다.
한 줄 정리
둘 다 '예전엔 JS로 메우던 레이아웃 문제를 CSS가 직접 가져갔다'는 흐름입니다. 동작은 아래 관련 데모에서 확인하세요.