jonbeo 님의 블로그

CSS Grid는 단순히 열을 나열하는 것뿐 아니라상황에 따라 자동으로 조정되는 반응형 레이아웃을 만들 수 있는고급 함수들도 제공합니다.이번 포스팅에서는 가장 많이 쓰이는 4가지 키워드를 정리해볼게요:repeat()minmax()auto-fillauto-fit ✅ 1. repeat()grid-template-columns: repeat(3, 1fr); → 1fr 1fr 1fr을 간단하게 줄인 형태예요.반복되는 패턴을 간단하게 작성할 수 있어요. ✅ 2. minmax()grid-template-columns: repeat(3, minmax(200px, 1fr)); → 각 열의 최소 너비는 200px, 최대는 남은 공간만큼→ 창 크기에 따라 유연하게 반응하는 열을 만들 수 있어요! ✅ 3. auto-fill..

Grid 레이아웃의 가장 강력한 기능 중 하나는하나의 아이템이 여러 칸을 차지할 수 있다는 점이에요.Flexbox에서는 어렵거나 비효율적이었던“두 칸짜리 카드”, “헤더 전체 확장” 같은 걸Grid에서는 grid-column과 grid-row로 아주 쉽게 만들 수 있어요! ✅ 기본 문법.item { grid-column: 1 / 3; /* 1번 선부터 3번 선 전까지 → 2칸 차지 */} 속성설명 grid-column열 방향 병합grid-row행 방향 병합 🔁 단축 표기grid-column: span 2; /* 현재 위치에서 오른쪽 2칸 차지 */grid-row: span 3; /* 현재 위치에서 아래로 3칸 차지 */ → 시작 지점 모를 때는 span으로만 간단하게! 🧪 실습 예시 ..