깔끔하고 잘 정렬된 카드 레이아웃을 만드는 것은 웹 개발에서 흔히 있는 작업입니다. 이 튜토리얼에서는 한 줄에 네 개의 카드가 있는 그리드를 만드는 방법을 단계별로 안내해 드리겠습니다. 각 카드에는 제목, 이미지, 가격, 글머리 기호 목록, CTA(Call-to-Action) 버튼 등 여러 콘텐츠 블록이 포함되어 있으며, CSS Grid와 강력한 CSS Subgrid 기능을 사용하여 카드 내에서 가로로 정렬됩니다. 무엇을 만들게 될까요? - 카드 그리드 레이아웃 (한 줄에 최대 4개의 카드) - 각 카드는 여러 콘텐츠 블록을 가로로 정렬하여 포함 - 전체 레이아웃을 위한 CSS Grid 사용 - 각 카드 내부 콘텐츠의 내부 정렬을 위한 CSS Subgrid 사용 CSS Subgrid를 사용하는 이유? CSS Subgrid는 중첩된 그리드가 부모 그리드의 트랙 크기를 상속할 수 있도록 하는 비교적 새로운 기능입니다. 이는 수동으로 트랙 크기를 계산하거나 복제할 필요 없이 내부 콘텐츠를 외부 그리드와 완벽하게 정렬할 수 있음을 의미합니다.