🪟 CSS Grid 템플릿 생성기 | 트랙 골라 복사

열(column) 지정 방식

열 개수 (auto-fit·직접 입력일 때는 무시)

열

열 최소 폭 (minmax·auto-fit 일 때)

열 트랙 직접 입력 (예: 200px 1fr 1fr)

행(row) 지정 방식

행 개수

행

행 고정 높이 (고정 높이일 때)

column-gap (열 사이)

row-gap (행 사이)

grid-template-areas (한 줄 = 한 행, 칸은 공백·쉼표로 구분 · 비울 칸은 마침표)

Grid 트랙과 영역 이름을 한 번에 만드는 법

Grid 는 열·행 트랙을 먼저 정하고 그 격자에 요소를 얹는 방식입니다. 여기서는 열 지정 방식만 고르면 repeat·fr·minmax·auto-fit 조합이 트랙 문자열로 나오고, 영역 이름을 적으면 grid-template-areas 블록과 칸마다 쓸 .area-이름 선택자가 함께 생깁니다.

areas 를 넣었을 때 검사하는 것

줄마다 칸 수가 같은지, 칸 수가 열 개수와 맞는지, 같은 이름이 직사각형을 이루는지 세 가지를 확인하고 어긋난 줄 번호를 알려 줍니다. 같은 이름이 L 자처럼 꺾이면 브라우저는 선언 전체를 조용히 버리기 때문에, 화면만 보고는 원인을 찾기 어렵습니다. 속성 표기는 W3C 의 CSS Grid Layout 명세를 따릅니다(2026년 10월 기준).

하지 않는 것

개별 아이템의 grid-column·grid-row 줄 번호 지정, subgrid, 그리고 flex 컨테이너 속성은 만들지 않습니다. 한 줄·한 축 정렬은 Flexbox 속성이 맞습니다. auto-fit 은 컨테이너 폭에 따라 열 수가 변해 areas 와 함께 쓸 수 없으므로 그 조합은 막아 둡니다.

자주 묻는 질문

areas 를 넣었는데 배치가 전혀 안 됩니다.

같은 이름이 직사각형을 이루지 않으면 브라우저가 선언 전체를 버립니다. 이 생성기는 그 경우 어떤 이름이 문제인지 먼저 알려 줍니다.

1fr 과 minmax 중 무엇을 써야 하나요?

1fr 은 남는 공간을 나누지만 내용이 길면 칸이 밀립니다. minmax(최소, 1fr) 은 최소 폭을 지켜서 좁은 화면에서 칸이 뭉개지는 것을 막습니다.

auto-fit 과 auto-fill 은 다른가요?

둘 다 폭에 맞춰 열을 채우지만, 내용이 모자랄 때 auto-fit 은 빈 트랙을 접고 auto-fill 은 빈 트랙을 남깁니다. 이 생성기는 auto-fit 만 만듭니다.

🪟CSS Grid 템플릿 코드 생성기

관련된 도구

CSS Flexbox 레이아웃 코드 생성기

그리드 컬럼 너비 계산기

Grid 트랙과 영역 이름을 한 번에 만드는 법

areas 를 넣었을 때 검사하는 것

하지 않는 것

자주 묻는 질문

관련된 도구

CSS Flexbox 레이아웃 코드 생성기

그리드 컬럼 너비 계산기

Grid 트랙과 영역 이름을 한 번에 만드는 법

areas 를 넣었을 때 검사하는 것

하지 않는 것

자주 묻는 질문

같은 카테고리 도구