CSS Grid 레이아웃 마스터
CSS Grid의 핵심 속성을 실시간으로 조작하며 레이아웃이 변하는 것을 확인하세요. 아래 컨트롤 패널에서 값을 바꾸면 미리보기와 코드가 즉시 업데이트됩니다.
🎮 실시간 Grid 플레이그라운드
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
justify-items: stretch;
align-items: stretch;
}
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
justify-items: stretch;
align-items: stretch;
}
⚡ 클릭으로 적용하는 Grid 템플릿
자주 쓰는 레이아웃 패턴을 클릭하면 위 플레이그라운드에 바로 적용됩니다.
3열 균등 그리드
repeat(3, 1fr)
사이드바 레이아웃
280px 1fr
반응형 카드 그리드
repeat(auto-fill, minmax(240px, 1fr))
콘텐츠 중심 레이아웃
1fr 2fr 1fr
2열 그리드
repeat(2, 1fr)
4열 그리드
repeat(4, 1fr)
📋 CSS Grid 속성 치트시트
컨테이너 속성
display: grid그리드 활성화
grid-template-columns열 정의
grid-template-rows행 정의
gap행/열 간격
grid-template-areas영역 이름 지정
grid-auto-flow자동 배치 방향
아이템 속성
grid-column열 위치/범위
grid-row행 위치/범위
grid-area영역 이름 할당
justify-self개별 수평 정렬
align-self개별 수직 정렬
span 키워드여러 셀 차지
유용한 함수
repeat(n, size)n번 반복
minmax(min, max)최소~최대 크기
auto-fill가능한 많이 채움
auto-fit남은 공간 늘림
fr 단위비율로 크기 지정
⚖️ Flexbox vs Grid — 언제 무엇을 쓸까?
| 구분 | Flexbox | Grid |
|---|---|---|
| 방향 | 1차원 (행 또는 열) | 2차원 (행 + 열 동시) |
| 적합한 상황 | 내비게이션, 버튼 그룹, 카드 한 줄 | 전체 페이지 레이아웃, 복잡한 그리드 |
| 콘텐츠 기반 | 콘텐츠 크기에 따라 유연하게 | 레이아웃 구조를 먼저 정의 |
| 브라우저 지원 | 매우 넓음 (IE11 포함) | 넓음 (IE11 부분 지원) |