Skip to content
COSMODEV

CSS Grid 해설

자주 쓰는 CSS grid 속성을 적용 대상인 컨테이너, 아이템, 크기 단위별로 묶었습니다. 각 행은 속성과 자주 쓰는 값을 짝지어 보여줍니다.

Grid는 요소를 2차원, 즉 행과 열을 동시에 배치합니다. 부모에 display: grid를 설정하고, grid-template-columns와 grid-template-rows로 트랙을 정의한 뒤 자식을 셀에 배치하세요. 페이지와 카드 레이아웃에는 grid를, 1차원 막대에는 flexbox를 사용하세요. 둘은 자유롭게 조합할 수 있습니다.

참고 표 · 33 항목
33 of 33 rows
컨테이너
grid | inline-grid요소를 grid 컨테이너로 만듭니다.
1fr 1fr | repeat(3, 1fr) | 200px 1fr열과 그 너비를 정의합니다.
auto 1fr auto행과 그 높이를 정의합니다.
[main-start] 1fr [main-end]템플릿에서 그리드 라인에 이름을 붙이고 그 이름으로 항목을 배치합니다.
1rem | 8px 16px행과 행, 열과 열 사이의 간격.
"header header" "nav main"셀에 이름을 붙여 배치를 읽기 쉽게 만듭니다.
"head head" 64px "nav main" 1fr / 200px 1fr행, 열, 영역을 하나의 약식 표기로 설정합니다.
repeat(2, 1fr) / auto-flow 80px모든 트랙 속성과 grid-auto-flow를 하나의 선언으로 설정합니다.
minmax(80px, auto)템플릿이 정의하지 않는 행의 높이를 설정합니다.
120px | minmax(0, 1fr)템플릿이 정의하지 않는 열의 너비를 설정합니다.
row | column | row dense배치되지 않은 항목이 흐를 축을 고릅니다. dense는 앞쪽 빈칸을 다시 채웁니다.
start | center | end | stretch각 항목을 셀 안에서 행 축을 따라 정렬합니다.
start | center | end | stretch각 항목을 셀 안에서 열 축을 따라 정렬합니다.
center | start endalign-items와 justify-items를 하나의 선언으로 설정합니다.
start | center | space-between트랙 격자 전체를 컨테이너 안에서 행 축을 따라 정렬합니다.
start | center | space-between트랙 격자 전체를 컨테이너 안에서 열 축을 따라 정렬합니다.
center | end startalign-content와 justify-content를 하나의 선언으로 설정합니다.
아이템
1 / 3 | span 2항목을 열에 배치하거나 여러 열에 걸치게 합니다.
1 / 2 | span 3항목을 행에 배치하거나 여러 행에 걸치게 합니다.
grid-column: 2 / -1그리드 끝에서부터 라인을 셉니다. -1이 마지막 라인입니다.
header | 1 / 1 / 2 / 3하나의 약식 표기로 항목에 이름을 붙이거나 완전히 배치합니다.
start | center | end | stretch이 항목 하나를 셀 안에서 행 축을 따라 정렬합니다.
start | center | end | stretch이 항목 하나를 셀 안에서 열 축을 따라 정렬합니다.
center | start endalign-self와 justify-self를 하나의 선언으로 설정합니다.
크기 단위
1fr | 2fr트랙의 남은 공간 중 차지하는 비율.
auto | 1fr auto트랙을 콘텐츠 크기에 맞춥니다. 정렬로 늘일 수 있습니다.
min-content | max-content트랙을 가장 작거나 가장 큰 콘텐츠에 맞춥니다.
fit-content(180px)트랙을 콘텐츠에 맞추되 주어진 상한을 넘지 않게 합니다.
minmax(200px, 1fr)트랙을 최솟값과 최댓값 사이로 제한합니다.
repeat(4, 1fr)트랙 패턴을 하나씩 적지 않고 반복합니다.
repeat(auto-fit, minmax(120px, 1fr))들어가는 만큼 트랙을 추가합니다. auto-fit은 빈 트랙을 접습니다.
grid-template-columns: subgrid중첩 그리드가 부모의 트랙과 라인 이름을 공유하게 합니다.
grid-template-rows: masonry실험적: 고정 행 대신 높이에 따라 항목을 열에 채워 넣습니다.