가이드 목록으로
입문
CSS Grid 레이아웃
2차원 배치의 마법! 행과 열을 자유롭게 다루는 Grid 핵심 개념을 배웁니다.
CSS Grid란?
Grid는 격자, 바둑판을 뜻해요. Flexbox가 한 줄(1차원) 배치라면, Grid는 행과 열(2차원)을 동시에 다뤄요!
엑셀 시트처럼 칸을 나눠서 요소들을 배치하는 시스템이에요. 카드 갤러리, 대시보드처럼 복잡한 레이아웃에 딱이죠!
아이템 1
아이템 2
아이템 3
아이템 4
아이템 5
아이템 6
Grid 적용: 3열 격자로 자동 배치!
바이브코딩 팁
"이 카드들을 3열 그리드로 배치해줘"
Flexbox vs Grid
Flexbox (1차원)
1
2
3
한 줄(가로 OR 세로)만 제어
Grid (2차원)
1
2
3
4
5
6
행과 열 동시에 제어
열 정의 (Columns)
가로 방향으로 몇 칸으로 나눌지 정해요.
열 개수3열
1
2
3
4
5
6
바이브코딩 팁
"상품 카드를 3열로 배치해줘"
행 정의 (Rows)
세로 방향으로 몇 줄로 나눌지 정해요.
행 개수2행
1
2
3
4
5
6
바이브코딩 팁
"행 높이는 자동으로 맞춰줘"
간격 (gap)
셀 사이에 균일한 간격을 줘요. 가로(column-gap)와 세로(row-gap)를 따로 줄 수도 있어요.
간격 (gap)16px
1
2
3
4
5
6
바이브코딩 팁
"카드 사이에 24px 간격 줘"
아이템 배치 (span)
특정 아이템이 여러 칸을 차지하게 할 수 있어요.
1
2
3
4
5
6
바이브코딩 팁
"첫 번째 카드는 2칸 차지하게 해줘"
실전 예시
상품 갤러리 (auto-fill + minmax)
이미지
상품 1
₩29,000
이미지
상품 2
₩29,000
이미지
상품 3
₩29,000
이미지
상품 4
₩29,000
이미지
상품 5
₩29,000
이미지
상품 6
₩29,000
대시보드 레이아웃
메인 차트
방문자
매출
최근 활동
이미지 그리드 (다양한 크기)
세로 긴 이미지
가로 긴 이미지
작은
이미지
반응형 카드 그리드
카드 1
화면 크기에 따라 열 수가 변해요
카드 2
화면 크기에 따라 열 수가 변해요
카드 3
화면 크기에 따라 열 수가 변해요
카드 4
화면 크기에 따라 열 수가 변해요