CSS 그리드 생성기

그리드 레이아웃을 미리보며 CSS 코드를 만듭니다.

열 개수 3 행 개수 2 간격(px) 12

카드 목록이나 갤러리를 나란히 놓을 때 float나 inline-block으로 씨름하던 시절이 있었습니다. CSS 그리드를 쓰면 열과 행, 간격만 정해 주면 브라우저가 알아서 칸을 나눠 줍니다.

이 도구는 열·행 개수와 간격을 조절하면 실제 격자를 그려 보여 주고, 그대로 붙여넣을 수 있는 CSS를 만들어 줍니다.

어떻게 계산되나요

만들어지는 코드

부모 요소에 세 가지를 지정하는 형태입니다. 자식 요소에는 아무것도 쓰지 않아도 순서대로 칸에 채워집니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 12px;
}

display: grid — 이 요소를 격자 컨테이너로 만듭니다.
repeat(N, 1fr) — N개의 열을 만들고 남는 공간을 똑같이 나눕니다.
gap — 칸과 칸 사이 간격입니다. 바깥 여백에는 영향을 주지 않습니다.

슬라이더 범위

항목	범위	대응 속성
열 개수	1~8	`grid-template-columns`
행 개수	1~8	`grid-template-rows`
간격	0~40px	`gap`

미리보기는 모양을 보기 쉽게 행 높이를 고정해 그리지만, 복사되는 코드는 내용에 맞춰 늘어나는 auto로 나옵니다.

실전에서 조금 더

행 개수는 대개 지정하지 않아도 됩니다. 항목 수가 늘면 행이 자동으로 생기기 때문에, 열만 정해 두고 grid-template-rows를 지워도 잘 동작합니다. 화면이 좁을 때 열 수를 줄이려면 미디어쿼리에서 grid-template-columns 값만 바꾸거나, repeat(auto-fit, minmax(200px, 1fr))처럼 써서 자동으로 줄바꿈되게 할 수도 있습니다.

용어 정리

fr: 남은 공간을 나누는 그리드 전용 단위입니다. `1fr 1fr`이면 공간을 반씩 나눕니다.
repeat(N, 값): 같은 크기의 트랙을 N번 반복해 적는 것을 줄여 쓰는 표기입니다.
gap: 칸 사이 간격입니다. `row-gap`과 `column-gap`을 따로 지정할 수도 있습니다.
grid-template-columns / rows: 열과 행의 크기를 정하는 속성입니다. 값의 개수가 곧 트랙 개수가 됩니다.
auto: 내용 높이에 맞춰 자동으로 늘어나는 값입니다. 행 높이에 자주 씁니다.

자주 묻는 질문

행 개수를 꼭 지정해야 하나요?

아닙니다. 열만 정해 두면 항목이 늘어날 때 행이 자동으로 생깁니다. 복사한 코드에서 `grid-template-rows` 줄을 지워도 대부분 문제없이 동작하며, 오히려 항목 수가 유동적인 목록에서는 지우는 편이 편합니다.

모바일에서 열 수를 줄이려면 어떻게 하나요?

미디어쿼리 안에서 `grid-template-columns` 값만 바꿔 주면 됩니다. 예를 들어 `@media (max-width: 640px) { .container { grid-template-columns: repeat(2, 1fr); } }`처럼 씁니다. 자동 처리를 원하면 `repeat(auto-fit, minmax(200px, 1fr))`도 자주 쓰입니다.

gap과 margin은 뭐가 다른가요?

`gap`은 칸과 칸 '사이'에만 간격을 넣고 격자 바깥쪽에는 여백을 만들지 않습니다. 자식에 `margin`을 주면 가장자리에도 여백이 생겨 정렬이 어긋나 보이기 쉬우므로, 그리드에서는 `gap`을 쓰는 편이 깔끔합니다.

특정 칸만 두 칸 폭으로 넓히려면?

해당 자식 요소에 `grid-column: span 2;`를 지정하면 가로로 두 칸을 차지합니다. 세로로 늘리려면 `grid-row: span 2;`를 씁니다. 이 도구는 격자 틀을 만드는 단계까지 도와주고, 개별 칸 배치는 이렇게 직접 지정하면 됩니다.

flex와 grid 중 뭘 써야 하나요?

한 방향으로 늘어놓는 배치(가로 메뉴, 버튼 묶음)에는 flex가 간단하고, 가로·세로를 동시에 맞춰야 하는 격자형 배치(카드 목록, 갤러리)에는 grid가 편합니다. 둘을 겹쳐 쓰는 것도 흔한 방식입니다.