CSS 그리드 생성기
행·열과 간격을 고르면 CSS 그리드 코드를 만들어 주고 결과를 미리 보여줍니다.
열 (세로줄)
fr
fr
fr
행 (가로줄)
auto
auto
px
px
미리보기
1
2
3
4
5
6
CSS
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 16px;
같은 크기가 이어지면 repeat() 으로 줄여 적습니다. 손으로 쓰는 코드와 같은 모습이라 붙여 넣고 이어서 고치기 좋습니다. 행·열 간격이 같으면 gap 한 줄로, 다르면 row-gap과 column-gap으로 나눠 적습니다.
fr은 남은 공간을 나눠 갖는 비율입니다. 1fr 1fr 2fr이면 넷으로 나눠 1:1:2로 씁니다. px는 고정, auto는 내용에 맞춰집니다. 고정 폭과 fr을 섞으면 고정분을 뺀 나머지를 fr끼리 나눕니다.
사용 방법
- 1열과 행의 개수를 +· 버튼으로 맞춥니다.
- 2각 줄의 크기 단위(fr·px·auto)와 값을 고릅니다.
- 3미리보기로 확인하고 CSS를 복사해 씁니다.
자주 묻는 질문
남은 공간을 나눠 갖는 비율입니다. 1fr 1fr 2fr이면 전체를 넷으로 나눠 1:1:2로 씁니다. px 같은 고정 크기와 섞으면 고정분을 먼저 빼고 남은 공간만 fr끼리 나눕니다. 화면 폭이 달라져도 비율이 유지되므로 반응형 레이아웃에 적합합니다.
auto는 그 칸의 내용 크기에 맞추고, fr은 내용과 상관없이 남은 공간을 비율대로 나눕니다. 내용이 짧은 칸에 1fr을 주면 빈 공간이 남고, auto를 주면 내용만큼만 차지합니다.
1fr 1fr 1fr보다 repeat(3, 1fr)이 읽기 쉽고 개수를 바꾸기도 편하기 때문입니다. 두 표기는 완전히 같습니다. 이 도구는 같은 크기가 이어질 때만 묶으므로 1fr 200px 1fr처럼 사이에 다른 값이 끼면 그대로 나열합니다.
gap은 행 간격과 열 간격을 한 번에 지정하는 줄임 표기입니다. 둘이 같으면 gap 한 줄로 적고, 다르면 row-gap과 column-gap으로 나눠 적습니다. 이 도구가 알아서 골라 줍니다.
자식 요소에 grid-column: span 2 처럼 적으면 됩니다. 이 도구는 컨테이너 쪽 속성만 만들어 주므로, 개별 칸의 배치는 만들어진 코드에 직접 더하세요.
알아두면 좋은 점
- 컨테이너 쪽 속성만 만듭니다. 개별 칸의 배치(grid-column, grid-area)는 직접 더하세요.
- 열과 행은 각각 8개까지 다룹니다.
- minmax()나 auto-fit 같은 고급 표기는 만들어진 코드에 직접 넣어 쓰세요.
함께 보면 좋은 도구
마지막 검증: 2026년 8월 29일 · 결과는 참고용 추정치입니다.