CSS Grid 생성기

grid-template-columns/rows, justify-items, align-items, gap를 GUI로 조작하며 실시간 미리보기로 실제 CSS Grid 레이아웃을 테스트할 수 있는 무료 도구입니다. 생성된 CSS 코드는 클릭 한 번으로 복사할 수 있습니다.

마지막 업데이트: 2026-09-20

손으로 만지며 CSS Grid 배치를 짜기

CSS Grid는 행과 열을 한꺼번에 다루는 이차원 배치 방식입니다. 이 도구는 `grid-template-columns`·`rows`·`justify-items`·`align-items`·`gap`을 화면에서 바꿔 가며 결과를 확인하고, 완성된 CSS를 복사해 갈 수 있게 해 줍니다.

**Flexbox와의 갈림은 「축이 하나인가 둘인가」로 생각하면 헤매지 않습니다.** 한 줄로 늘어놓기만 한다면 Flexbox로 넉넉하고, **행과 열을 함께 맞춰야 하는 표 같은 배치라면 Grid가 더 알맞습니다.** Grid만의 강점은 `fr`이라는 단위로, 「남은 공간의 몫」을 나타냅니다. `1fr 2fr`이라 적으면 남은 너비를 1 대 2로 나눠 갖습니다. **또 하나 새겨 둘 만한 것이 `repeat(auto-fit, minmax(200px, 1fr))`이라는 표기입니다.** 이것만으로 **미디어 쿼리를 한 줄도 쓰지 않고 너비에 따라 열 수가 늘고 주는 배치**를 만들 수 있습니다.

사용하는 방법

프리셋에서 시작합니다 3열이나 머리글과 사이드바 같은 흔한 꼴이 마련되어 있습니다.
열과 행의 정의를 바꿉니다 **`fr`을 쓰면 남은 공간을 비율로 나눠 가질 수 있습니다.**
정렬 속성을 시험합니다 `justify-items`와 `align-items`가 각 칸 안 내용의 자리를 정합니다.
만들어진 CSS를 복사합니다 마음에 드는 꼴이 되면 그대로 코드에 붙여 넣을 수 있습니다.

더 잘 활용하기 위한 팁

grid-template-columns: repeat(3, 1fr)의 fr 단위는 "남은 공간을 나누는 비율"을 나타내므로, 화면 너비가 바뀌어도 열의 비율이 그대로 유지됩니다.
gap 속성은 행과 열 사이의 여백에만 적용되며, margin과 달리 그리드 바깥쪽에는 영향을 주지 않습니다. row-gap과 column-gap을 따로 지정할 수도 있습니다.
"auto"로 설정한 트랙은 실제 콘텐츠 크기에 맞춰 늘어나거나 줄어들기 때문에, 내용 길이가 일정하지 않은 열이나 행에 적합합니다.
grid-column: span 2와 같이 개별 아이템에 오버라이드를 적용하면 헤더나 푸터만 그리드 전체 너비로 확장할 수 있습니다.
행과 열을 동시에 제어해야 하는 복잡한 격자 레이아웃에는 Grid를, 한 방향으로만 나열하면 충분한 경우에는 Flexbox를 사용하세요(CSS Flexbox 생성기도 참고하세요).

이럴 때 쓸 수 있습니다

페이지 전체의 뼈대를 세울 때

**머리글·사이드바·본문·바닥글의 배치는 Grid가 가장 잘하는 일입니다.**

카드를 격자로 늘어놓을 때

**`auto-fit`과 `minmax`를 맞물리면 화면 너비에 따라 열 수가 절로 바뀝니다.**

입력 폼을 가지런히 할 때

라벨과 입력란의 열을 맞추면 세로줄이 통해 읽기가 한결 수월해집니다.

Grid를 익힐 때

값을 바꾸며 결과를 보면 행과 열이 어떻게 정해지는지가 잡힙니다.

CSS Grid 용어

그리드 컨테이너: `display: grid`를 준 부모 요소입니다. 행과 열은 그 안에서 정의됩니다.
fr: **남은 공간의 몫을 나타내는 단위**입니다. `1fr 2fr`이면 남은 너비를 1 대 2로 나눠 갖습니다.
grid-template-columns: 열의 차례와 너비를 정합니다. `repeat()`를 쓰면 같은 값을 거듭 적지 않아도 됩니다.
minmax: 가장 작은 값과 가장 큰 값을 주는 함수입니다. **`minmax(200px, 1fr)`은 「200픽셀은 지키되 여유가 있으면 늘어난다」는 뜻입니다.**
auto-fit: 들어가는 만큼 열을 만드는 표기입니다. **`minmax`와 맞물리면 미디어 쿼리 없이도 줄이 바뀝니다.**
gap: 행과 열 사이에 두는 여백입니다. 두 방향을 따로 지정할 수도 있습니다.

자주 묻는 질문

전체 페이지 골격이나 대시보드처럼 행과 열을 동시에 제어해야 할 때는 CSS Grid가 적합합니다. 반면 내비게이션 바나 카드 목록처럼 한 방향(행 또는 열)으로만 나열하면 충분한 경우에는 Flexbox가 더 간단합니다. 실제로는 페이지 전체 골격은 Grid로, 개별 컴포넌트 내부는 Flexbox로 구현하는 방식으로 두 가지를 함께 사용하는 경우가 많습니다.

fr은 "fraction(비율)"의 약자로, 컨테이너 안에 남은 공간을 지정한 비율로 나누는 단위입니다. 예를 들어 grid-template-columns: 1fr 2fr로 지정하면 두 번째 열이 첫 번째 열보다 2배 넓어지도록 공간이 배분됩니다. px 같은 절대 단위와 달리, fr 트랙은 컨테이너 크기가 바뀌어도 비율을 그대로 유지합니다.

repeat()는 같은 트랙 패턴을 여러 번 반복해서 지정하는 함수로, repeat(3, 1fr)은 grid-template-columns: 1fr 1fr 1fr과 같은 의미입니다. 열의 개수가 많거나 동적으로 바뀌는 경우에도 반복 횟수와 트랙 크기라는 두 인수만으로 간결하게 표현할 수 있습니다.

홀리그레일(성배) 레이아웃은 헤더・사이드바・메인 콘텐츠・푸터를 조합한, 웹 디자인에서 오래전부터 정석으로 여겨져 온 화면 구성을 말합니다. CSS Grid 이전에는 float나 테이블 태그를 이용한 복잡한 편법이 필요했지만, grid-template-areas와 같은 속성을 사용하면 몇 줄의 CSS만으로 이 레이아웃을 재현할 수 있습니다.

grid-column: span N은 해당 아이템을 가로 방향으로 N개의 트랙(열)에 걸쳐 배치하는 속성입니다. 예를 들어 헤더 요소에만 grid-column: span 3을 지정하면 다른 아이템은 일반 셀에 그대로 배치된 채 헤더만 3열 그리드의 전체 너비를 차지하도록 만들 수 있습니다(grid-row에도 동일한 span 문법을 사용할 수 있습니다).

여담이지만 ― Flexbox가 다루지 않는 "2차원"을 지향한 CSS Grid

CSS Grid Layout은 한 방향으로 나열하는 데 특화된 Flexbox와 달리, 행과 열을 동시에 정의할 수 있는 2차원 레이아웃 시스템으로 설계되었습니다. W3C에서의 표준화는 2011년 무렵부터 진행되었으며, 2017년 Chrome・Firefox・Safari・Edge 등 주요 브라우저가 거의 동시에 지원을 구현하면서 실무 도입이 급속히 확산되었습니다.

Grid가 등장하기 전, 헤더・사이드바・메인 콘텐츠・푸터로 이루어진 이른바 "홀리그레일" 구조로 페이지를 배치하려면 float나 테이블 태그를 이용한 복잡한 편법에 의존할 수밖에 없었습니다. CSS Grid는 grid-template-columns・grid-template-rows・grid-template-areas와 같은 선언적 속성을 도입해, 이 정석 레이아웃을 단 몇 줄의 CSS만으로 구현할 수 있게 했습니다.

오늘날에는 대시보드 UI・이미지 갤러리・잡지 스타일 레이아웃처럼 행과 열을 의식한 디자인 작업 대부분이 CSS Grid로 구현되고 있습니다. 중첩된 그리드가 부모의 트랙 크기를 물려받을 수 있는 "subgrid" 지원도 주요 브라우저에서 확산되고 있어, 더 복잡한 다단계 레이아웃의 일관성을 유지하기가 쉬워지고 있습니다.

실무에서는 "페이지 전체 골격은 Grid, 컴포넌트 내부 요소 배치는 Flexbox"라는 역할 분담이 정착되어 가고 있습니다. 둘은 경쟁 관계의 기술이 아니라, 1차원 정렬과 2차원 격자 배치라는 서로 다른 강점을 지닌 상호 보완적인 도구이며, 한 페이지 안에서 두 가지를 함께 사용하는 것이 오히려 표준적인 방식으로 여겨집니다.

모든 여담 보기