jonbeo 님의 블로그

실전 예제 – Grid로 반응형 카드형 갤러리 만들기

이제까지 Grid의 핵심 속성들과 고급 기능들을 배워봤다면,이번엔 그걸 활용해서 반응형 카드 갤러리 레이아웃을 직접 만들어볼 차례예요!auto-fit + minmax + gap + grid-template-columns이 조합으로 깔끔하고 유연한 그리드 레이아웃을 완성할 수 있어요. ✅ 목표 레이아웃가로폭이 넓을 땐 4~5열 카드좁아지면 자동으로 3열 → 2열 → 1열로 유연하게 변신카드 간격은 gap, 크기는 minmax()로 관리 🧱 HTML 구조 1 2 3 4 5 6 🎨 CSS 스타일.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 20..

지금까지 Flexbox의 핵심 속성들을 하나씩 알아봤습니다.이번엔 그 모든 걸 한 번에 실습해보는 카드 UI 예제로 정리해볼게요!display: flexflex-wrapgapflex-basis, flex-growjustify-content, align-items전부 다 써보면서 유연하고 정돈된 레이아웃을 만들어봅니다. ✅ 완성될 레이아웃 미리 보기화면이 넓을 땐 카드가 3개씩 가로 정렬좁아지면 자동으로 줄바꿈 (flex-wrap)카드 사이 간격은 gap으로 관리각 카드는 일정한 크기로 나열되며, 여백에 따라 비율로 조정 (flex-basis, flex-grow) 🧱 HTML 구조 Card 1 Card 2 Card 3 Card 4 Card 5 🎨 CSS 스타일.card-wrap { disp..