K
KRYFT Problem Bank
프론트엔드 보통 코딩

CSS Grid 레이아웃

CSS Grid를 사용한 반응형 카드 갤러리 구현

25분
70점
#3691

문제 설명

CSS Grid를 사용하여 반응형 카드 갤러리 레이아웃을 구현하세요.

요구사항

  • 컨테이너는 최소 3열, 최대 화면에 맞게 자동 조절
  • 각 카드는 최소 250px 너비
  • 카드 간격은 20px
  • 첫 번째 카드는 2x2 크기로 강조 표시
  • 호버 시 카드가 약간 위로 올라오는 효과

제공되는 HTML

<div class="gallery">
  <div class="card featured">Featured</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

평가 기준

  • Grid 속성의 올바른 사용
  • 반응형 동작
  • 시각적 완성도
실행 버튼을 눌러 코드를 실행하세요.