Step 4 - 카드 그리드 만들기

🎯 학습 목표

여러 카드를 가로로 배치하여 그리드 레이아웃을 만들 수 있다

1️⃣ 카드 3개 가로 배치

카드 1

첫 번째 카드

카드 2

두 번째 카드

카드 3

세 번째 카드

바깥 컨테이너: flex gap-4

카드가 내용에 따라 크기가 달라요

2️⃣ Flex-1로 균등 분배

카드 1

첫 번째 카드

카드 2

두 번째 카드입니다 (내용이 더 많아요)

카드 3

세 번째

각 카드에: flex-1

모든 카드가 같은 너비로 균등 분배! ⭐

🛍️ 실전 예제: 제품 카드 그리드

무선 이어폰

고음질 블루투스

49,000원

스마트 워치

건강 관리 필수품

159,000원

노트북 거치대

업무 효율 UP

29,000원

패턴 분석:
• 바깥: flex gap-4 (가로 배치)
• 각 카드: flex-1 (균등 분배)
• 카드 내부: flex flex-col gap-3 (세로 배치)

📊 2줄 그리드 레이아웃

카드 1

첫 번째 줄

카드 2

첫 번째 줄

카드 3

첫 번째 줄

카드 4

두 번째 줄

카드 5

두 번째 줄

카드 6

두 번째 줄

구조:
• 최외곽: flex flex-col gap-4 (줄들을 세로 배치)
• 각 줄: flex gap-4 (카드들을 가로 배치)

📈 실전 예제: 대시보드 통계 카드

👥

오늘 방문자

1,234

↑ 12% 증가

💰

오늘 판매

2.4M

↑ 8% 증가

⭐

신규 회원

89

↓ 3% 감소

📦

주문 수

156

↑ 24% 증가

🎨 직접 만들어보기

📝 미션

블로그 포스트 카드 3개를 가로로 배치해보세요:

  • 각 카드: 이미지 영역 (높이 32) + 제목 + 날짜 + 요약
  • 세로 배치 (flex-col), 간격 2
  • 카드들은 가로로 나란히, 균등 분배
  • 흰색 배경, 그림자, 둥근 모서리

✅ 핵심 정리

카드 그리드 패턴:
  • 바깥 컨테이너: flex gap-4
  • 각 카드: flex-1 (균등 분배)
  • 카드 내부: flex flex-col gap-3
2줄 그리드:
  • 최외곽: flex flex-col gap-4 (줄을 세로 배치)
  • 각 줄: flex gap-4 (카드를 가로 배치)

💡 핵심: flex를 중첩해서 사용하면 복잡한 레이아웃도 쉽게!

🎉 축하합니다!

Step 4까지 완료하셨습니다!
이제 카드 UI의 모든 기본을 마스터하셨어요.

연습 문제를 풀어보며 실력을 더 키워보세요! 💪