이 CSS Grid 생성기는 폭이 같은 N개의 열, 높이가 같은 M개의 행, 간격으로 이루어진 균등 그리드의 컨테이너 규칙을 만들어 줍니다. 숫자를 입력하면 번호가 붙은 셀이 미리보기에 그려지고, 결과로 display: grid, grid-template-columns, grid-template-rows, gap 네 줄이 나옵니다. 그대로 스타일시트에 붙여 넣으면 됩니다.
미리보기 위에 직접 그릴 수도 있습니다. 셀 위를 끌면 그 사각형이 grid-area 규칙을 가진 아이템이 되므로, 전체 폭을 차지하는 헤더나 2 x 2 칸을 덮는 차트도 선 번호 계산 없이 한 번의 드래그로 만들 수 있습니다. 아이템 탭에는 그린 아이템마다 .item-N 규칙이 하나씩 나옵니다.
카드 갤러리, 위젯 개수가 정해진 대시보드, 달력형 월간 보기, 요금제 표, 사진 모음처럼 실제 페이지의 대부분을 차지하는 배치를 염두에 두었습니다. repeat(3, 1fr)과 repeat(3, minmax(0, 1fr)) 중 무엇을 써야 하는지 매번 떠올리기 번거롭다면, 항상 안전한 쪽인 후자를 얻을 수 있습니다.
범위는 균등 트랙으로 한정했습니다. 고정폭과 가변폭 혼합, grid-template-areas 이름 지정, auto-fit 반응형 규칙은 만들지 않습니다. 입력한 내용은 브라우저 안에서 처리되며 서버로 전송되지 않습니다.
사용 방법
열 개수 입력
1에서 12 사이의 정수를 입력합니다. 소수나 범위를 벗어난 값은 거부되므로 결과는 항상 유효한 CSS입니다.
행 개수 입력
역시 1에서 12 사이입니다. 미리보기에는 열 수 곱하기 행 수만큼 번호가 붙은 셀이 그려져, 암묵적 행이 생기기 전까지 몇 개의 항목이 들어가는지 확인할 수 있습니다.
간격 지정
0에서 96픽셀 사이로 정합니다. 연결 스위치가 켜져 있으면 값 하나가 행과 열 모두에 적용되어
gap: 16px처럼 한 값으로 출력됩니다. 스위치를 끄면 행과 열을 따로 정할 수 있고,gap: 24px 12px처럼 행 간격이 먼저 나옵니다.번호 미리보기 확인
셀 번호는 자동 배치가 채우는 순서, 즉 왼쪽에서 오른쪽, 위에서 아래입니다. HTML 자식 요소가 놓이는 순서와 같습니다. 열·행 수나 간격을 바꾸면 셀이 새 자리로 미끄러지듯 이동합니다.
셀 위에 아이템 그리기
셀 블록 위를 끌면 그 영역이 하나의 아이템이 됩니다. 기존 아이템 위에 그리면 대체되고, × 버튼이나 Delete 키로 지울 수 있으며, 아이템에 포커스를 두고 방향키로 크기를, Alt + 방향키로 위치를 바꿉니다. 홀리 그레일, 대시보드 같은 예제로 완성된 레이아웃을 볼 수 있습니다.
CSS 복사
컨테이너 탭을 복사해
.gallery { ... }처럼 요소의 규칙에 붙여 넣습니다. 아이템을 그렸다면 아이템 탭도 복사해 자식 요소에item-N클래스를 맞춰 주세요.
작동 원리
생성된 선언이 하는 일
repeat(3, minmax(0, 1fr))은 minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)을 줄여 쓴 것입니다. 각 트랙은 간격을 뺀 나머지 공간을 똑같이 나눠 가집니다. 컨테이너가 960px이고 열이 3개, 간격이 16px이면 남는 공간은 960 - 2 x 16 = 928px이므로 열 하나는 약 309.33px입니다.
fr 단위는 W3C의 CSS Grid Layout Module Level 1에 정의되어 있습니다. 그냥 1fr은 사실 minmax(auto, 1fr)이라서 최소 크기가 콘텐츠의 min-content 크기가 됩니다. 줄바꿈이 안 되는 긴 문자열, 넓은 이미지, <pre> 블록이 들어 있으면 열이 자기 몫보다 넓어져 컨테이너를 넘칠 수 있습니다. minmax(0, 1fr)은 최소값을 0으로 두기 때문에 트랙이 줄어들 수 있고, 콘텐츠는 줄바꿈되거나 잘립니다.
| 선언 | 생성되는 형태 | 효과 |
|---|---|---|
| 열 | repeat(N, minmax(0, 1fr)) | 자기 몫을 넘지 않는 N개의 같은 폭 열 |
| 행 | repeat(M, minmax(0, 1fr)) | M개의 같은 높이 행, 컨테이너 높이가 정해져 있어야 의미가 있음 |
| 간격 | gap: Gpx 또는 gap: Rpx Cpx | 행 사이와 열 사이의 간격, 값 하나 또는 둘 |
높이가 없을 때 행의 동작
가변 행은 컨테이너의 높이를 나눠 갖지만, 일반 블록 레벨 그리드는 height: auto입니다. 이때는 모든 1fr 행이 가장 높은 행의 콘텐츠 높이에 맞춰져서 행 높이는 같아지지만 나눌 여분의 공간은 없습니다. 고정된 높이를 행끼리 나누려면 컨테이너에 height나 min-height를 주거나, 높이가 정해진 flex·grid 부모 안에 넣어야 합니다.
자동 배치는 행 단위로 셀을 채웁니다. 열 3개, 행 2개로 선언했는데 자식이 8개이면 일곱 번째와 여덟 번째 항목이 암묵적인 세 번째 행을 만듭니다. 이 행의 높이는 생성된 repeat()가 아니라 기본값이 auto인 grid-auto-rows가 정합니다.
gap과 margin의 차이
gap(예전 이름 grid-gap)은 CSS Box Alignment Module Level 3에 정의된 속성입니다. 트랙 사이에만 공간을 만들고 바깥 가장자리에는 만들지 않으므로, 모든 자식에 margin을 주는 방식과 달리 그리드 둘레에 16px의 여백이 따로 생기지 않습니다. 현재 주요 브라우저는 모두 grid에서 gap을 지원하며, 값을 둘 주면 행 간격이 먼저, 열 간격이 나중입니다.
grid-area로 아이템 배치하기
자식이 모두 한 칸씩만 차지한다면 자동 배치로 충분합니다. 자식이 여러 칸을 덮게 하려면 가장자리를 직접 지정합니다. grid-area: 1 / 1 / 2 / 5는 시작 행 1, 시작 열 1, 끝 행 2, 끝 열 5라는 뜻입니다. 여기서 숫자는 셀이 아니라 그리드 선의 번호이고 1부터 세므로, 열이 4개인 그리드의 열 선은 5개입니다. 끝 선은 아이템이 멈추는 곳이라서, 열 4개를 가로지르는 헤더는 5번 선에서 끝납니다.
미리보기에서 그린 아이템도 정확히 이 형식으로 출력됩니다. 그려 둔 아이템은 명시적으로 배치되므로 나머지 자식은 그 주위를 비켜 빈 셀을 순서대로 채우며, 이는 실제 페이지에서 브라우저가 적용하는 자동 배치 동작과 같습니다.
실제 예시
열 3, 행 2, 간격 16display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 16px;번호 셀 6개. 컨테이너가 960px이면 열 하나는 309.33px입니다.
열 12, 행 1, 간격 0display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(1, minmax(0, 1fr));
gap: 0px;고전적인 12열 트랙입니다. 자식에 grid-column: span 4를 주면 3등분, span 3이면 4등분이 됩니다.
열 4, 행 4, 간격 24display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(4, minmax(0, 1fr));
gap: 24px;셀 16개. 컨테이너에 aspect-ratio: 1을 더하면 보드가 정사각형으로 유지됩니다.
열 4, 행 2, 행 간격 24, 열 간격 12display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 24px 12px;연결 스위치를 끄면 값 두 개 형태로 출력됩니다. 행 간격이 앞, 열 간격이 뒤입니다.
4 x 3 그리드, 1행의 첫 셀에서 마지막 셀까지 드래그.item-1 {
grid-area: 1 / 1 / 2 / 5;
}값은 시작 행 / 시작 열 / 끝 행 / 끝 열 순서이고 끝 선은 포함되지 않습니다. 5번 선에서 끝나면 1~4열을 덮습니다.
열 13, 행 1, 간격 0범위를 벗어났습니다. 열·행은 1~12, 간격은 0~96px입니다.값을 고치기 전에는 CSS가 만들어지지 않습니다. 열이 1.5처럼 소수이면 정수를 입력하라는 안내가, 간격이 96을 넘으면 범위 안내가 나옵니다.
자주 하는 실수
1fr을 그대로 써서 넘침이 생김
1fr은 최소 크기가 자동이라서 셀 안의 긴 URL이나 넓은 표 하나가 열 전체를 뷰포트 밖으로 밀어낼 수 있습니다. 생성된minmax(0, 1fr)은 이를 막지만, 손으로1fr로 되돌리면 넘침이 다시 나타납니다.낮은 컨테이너에서 행 높이가 같아지길 기대함
행이 남는 높이를 나눠 가지려면 컨테이너 높이가 정해져 있어야 합니다. 높이가 없으면 행은 콘텐츠에 맞춰질 뿐이라
repeat(2, minmax(0, 1fr))도auto auto와 똑같아 보입니다.셀보다 자식이 많은 경우
입력한 숫자는 명시적 그리드만 설명합니다. 넘치는 자식은 높이가
auto인 암묵적 행으로 들어갑니다. 이 행도 같은 높이로 맞추려면grid-auto-rows: minmax(0, 1fr)를 직접 추가해야 하며, 이 도구는 해당 줄을 출력하지 않습니다.좁은 화면에서도 고정된 열 수
360px 휴대폰에서 12개의 균등 열은 하나가 약 20px밖에 되지 않습니다. 미디어 쿼리로 열 수를 줄이거나, 브라우저가 들어갈 만큼 열을 정하게 하고 싶다면 직접
repeat(auto-fit, minmax(160px, 1fr))로 바꿔 쓰세요.gap을 padding으로 착각함
gap은 컨테이너 바깥 가장자리에는 생기지 않습니다. 그리드 둘레에 여백이 필요하면 컨테이너에
padding을 따로 주어야 합니다.
자주 묻는 질문
1fr과 minmax(0, 1fr)은 무엇이 다른가요?
1fr은 minmax(auto, 1fr)의 줄임말이라 트랙이 콘텐츠의 최소 크기보다 작아질 수 없습니다. minmax(0, 1fr)은 0까지 줄어들 수 있어서 긴 단어, 이미지, 코드 블록이 열을 늘리지 못합니다. 생성기가 후자를 쓰는 이유입니다.
열과 행은 몇 개까지 만들 수 있나요?
열과 행 모두 정수 1~12개, 간격은 0~96픽셀입니다. 이 범위를 벗어나면 애매한 CSS를 내놓는 대신 입력란 옆에 오류를 표시합니다.
행 간격과 열 간격을 다르게 줄 수 있나요?
가능합니다. 연결 스위치를 끄고 행 간격과 열 간격을 따로 정하면 gap: 24px 12px처럼 출력되며, 앞의 값이 행 간격, 뒤의 값이 열 간격입니다.
아이템이 여러 열을 차지하게 하려면 어떻게 하나요?
차지할 셀 위를 끌어서 그리세요. 아이템 탭에 그 아이템의 grid-area 규칙이 나옵니다. 컨테이너 규칙만 쓰고 싶다면 자식 요소에 grid-column: span 2를 직접 적어도 됩니다.
반응형 그리드도 만들어 주나요?
아니요. 결과는 열 수가 고정된 그리드입니다. 사용 가능한 폭에 따라 열이 늘고 줄게 하려면 열 규칙을 repeat(auto-fit, minmax(200px, 1fr))로 바꾸거나 미디어 쿼리를 추가하세요.
행이 컨테이너 높이를 채우지 않는 이유는 무엇인가요?
가변 행은 실제로 존재하는 공간만 나눕니다. 컨테이너에 height나 min-height를 주거나 높이가 정해진 부모 안에 넣으면 행이 그 높이를 균등하게 나눕니다.
예전 브라우저를 위해 grid-gap도 써야 하나요?
gap은 현재 주요 브라우저의 grid에서 모두 동작합니다. grid-gap은 예전 이름의 별칭일 뿐이라, 아주 오래된 엔진을 지원해야 하는 경우가 아니면 쓰지 않아도 됩니다.
입력한 값이 서버로 올라가나요?
아니요. 값은 브라우저 안에서 처리되며 서버로 전송되지 않습니다.
더 깊이 읽기
마지막 업데이트: