🔲 CSS Grid 생성기

사용법

1. 위쪽 프리셋(3열 카드, 반응형 카드, 사이드바, 12열 등)을 눌러 시작하거나 아래 항목을 직접 바꿔요.
2. 열 방식은 세 가지예요. "고정 열 수"는 repeat(N, 1fr), "자동 맞춤"은 repeat(auto-fit, minmax(최소폭, 1fr)), "직접 입력"은 240px 1fr처럼 열 폭을 그대로 써요.
3. 가로·세로 간격(gap), 행 높이(0이면 내용에 맞춤), justify-items·align-items를 바꾸며 미리보기에서 결과를 확인하세요.
4. 오른쪽 CSS 코드는 기본값과 같은 속성을 뺀 짧은 코드예요. copy 버튼으로 복사해 붙여 넣으세요.

CSS Grid의 기본 개념

Grid는 부모에 display: grid를 주면 자식들이 행과 열로 이뤄진 격자에 놓이는 2차원 레이아웃 방식이에요. Flexbox가 한 줄(또는 한 열)에서 아이템을 늘어놓는 데 알맞다면, Grid는 행과 열을 동시에 맞춰야 하는 갤러리·대시보드·폼 같은 곳에 알맞아요. 핵심은 grid-template-columns로 열의 개수와 폭을 정하는 것이고, 행은 아이템이 늘어나면 자동으로 만들어져요(암시적 행). 행 높이는 grid-auto-rows로 정해요.

fr 단위와 repeat(), minmax()

• fr은 남는 공간을 나눠 가지는 단위예요. 1fr 2fr은 남는 폭을 1:2로 나눠 가져요. 1fr 세 개면 같은 폭 3열이 돼요.
• repeat(3, 1fr)은 1fr 1fr 1fr을 줄여 쓴 거예요. 12열 그리드는 repeat(12, 1fr)이에요.
• minmax(200px, 1fr)은 "최소 200px, 최대 남는 공간 1fr"이에요. 열이 200px보다 좁아지지 않아요.
• auto-fit은 들어갈 수 있는 만큼 열을 자동으로 만들어요. repeat(auto-fit, minmax(220px, 1fr)) 한 줄이면 화면 폭에 따라 열 수가 바뀌는 반응형 카드 목록이 돼요(미디어 쿼리 없이). 미리보기 상자 폭을 바꿔 보기 어렵다면 브라우저 창 폭을 줄이며 확인하세요.

자주 쓰는 패턴과 코드

1. 3열 카드

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

2. 반응형 카드 (auto-fit)

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

화면이 넓으면 4~5열, 좁아지면 2열, 1열로 자동으로 줄어요. 카드 개수가 열 수보다 적을 때 남는 공간까지 채우려면 auto-fit, 열 크기를 유지하고 빈 칸을 남기려면 auto-fill을 써요.

3. 사이드바 + 본문

.container {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
}

왼쪽은 240px 고정, 오른쪽은 남는 공간 전체를 차지해요. 모바일에서는 미디어 쿼리로 grid-template-columns: 1fr로 바꿔 한 열로 쌓으면 돼요.

4. 12열 그리드

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

자식에서 grid-column: span 4처럼 쓰면 4칸을 차지해요. 부트스트랩 같은 12열 시스템을 직접 만들 수 있어요.

5. 행 높이를 고정하고 가운데 정렬

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 80px;
  gap: 4px 12px;
  justify-items: center;
  align-items: center;
}

영역 이름으로 배치하기 (grid-template-areas)

페이지 뼈대(머리글, 사이드바, 본문, 바닥글)를 만들 때는 칸에 이름을 붙이면 읽기 쉬워요. 부모에 grid-template-columns: 240px 1fr를 주고 grid-template-areas: "header header" "sidebar main" "footer footer"처럼 쓴 뒤, 자식에 grid-area: header 같은 이름을 붙이면 돼요. 모바일에서는 areas를 한 열로 다시 정의해 순서를 쌓으면 돼요. 이 생성기는 열과 간격 위주라서 areas는 코드를 복사한 뒤 직접 덧붙여 쓰세요.

반응형으로 쓰는 요령

미디어 쿼리 없이 반응형을 만들고 싶다면 auto-fit과 minmax 조합을 먼저 시도해 보세요. 열 수가 꼭 정해져야 하는 디자인(PC 4열, 태블릿 2열, 모바일 1열)이면 @media (max-width: 900px) { .container { grid-template-columns: repeat(2, 1fr); } }처럼 구간마다 열 수를 바꿔요. 간격(gap)은 모바일에서 줄이는 편이 보기 좋아요. 이미지가 든 카드는 aspect-ratio로 비율을 고정하면 행 높이를 따로 정하지 않아도 가지런해요. 카드마다 글 길이가 달라도 같은 행의 카드 높이가 같게 늘어나는 것이 Grid의 기본 동작(stretch)이라서, 카드 하단 버튼을 같은 높이에 맞추기도 쉬워요. 카드 안쪽 여백과 글자 크기는 px ↔ rem 변환기로 맞추면 편해요.

속성 정리

Flexbox와 Grid 선택 기준

메뉴 줄, 버튼 묶음, 카드 안쪽 정렬처럼 한 방향 배치는 Flexbox가 간단해요. 갤러리, 대시보드, 폼 레이아웃처럼 행과 열을 함께 맞추는 배치는 Grid가 코드가 짧아요. 큰 틀은 Grid로 잡고 칸 안의 내용 정렬은 Flexbox를 쓰는 조합이 많아요. Flexbox 값은 CSS Flexbox 생성기에서 미리 볼 수 있어요.

자주 겪는 문제

• 열이 삐져나와요: 자식 안의 긴 문자열이나 이미지가 폭을 밀어낼 수 있어요. 열을 minmax(0, 1fr)로 쓰거나 자식에 min-width: 0을 주면 해결돼요.
• auto-fit인데 열이 안 늘어나요: 최소 폭이 너무 크면 한 열만 만들어져요. 최소 폭을 줄이세요.
• 높이가 제각각이에요: 기본값은 한 행에서 가장 큰 높이에 맞춰 늘려요(stretch). 내용 높이대로 두려면 align-items: start를 쓰세요.
• 간격이 안 먹어요: 아주 오래된 브라우저에서는 gap 대신 margin을 써야 해요. 최근 브라우저는 모두 지원해요.
• 순서가 바뀌어 보여요: 시각 순서만 바꾸면 키보드 탐색 순서와 어긋나 접근성에 좋지 않아요. 가능하면 HTML 순서를 바꾸세요.

값 목록은 MDN Web Docs의 CSS Grid Layout 문서 기준이에요. 미리보기는 이 브라우저에서 바로 그려지고 입력값은 밖으로 나가지 않아요.

자주 묻는 질문

관련 도구