CSS Grid 생성기

CSS Grid 레이아웃을 시각적으로 구성. 열, 행, 간격 및 템플릿 값을 라이브 미리보기로 설정하고 코드를 즉시 출력. 무료, 브라우저 기반.

100% 클라이언트 사이드 데이터가 브라우저 밖으로 나가지 않습니다 무료 · 회원가입 불필요
미리보기
생성된 CSS

관련 도구

UUID 생성기 즉시 v4 UUID 생성 — 단건 또는 일괄 생성. 색상 변환기 HEX, RGB, HSL 형식 간 색상 변환. 실시간 색상 미리보기. 정규식 테스터 매치 하이라이트와 캡처 그룹 세부 정보로 정규식을 실시간 테스트. 타임스탬프 변환기 Unix 타임스탬프를 사람이 읽을 수 있는 날짜로 변환하거나 그 반대로. 초/밀리초 자동 감지. QR 코드 생성기 URL, 텍스트, Wi-Fi 정보 등에서 QR 코드 생성. PNG로 다운로드 가능. Cron 표현식 파서 Cron 표현식을 자연어로 설명. 다음 10번의 실행 예정 시간 미리보기.

사용 방법

  1. 열 수와 행 수를 설정합니다 — 미리보기와 템플릿 입력이 자동으로 업데이트됩니다.
  2. 열 간격과 행 간격을 조정하여 셀 사이의 거터를 제어합니다.
  3. grid-template-columns 또는 grid-template-rows를 임의의 값(예: 200px 1fr auto)으로 재정의할 수 있습니다.
  4. 라이브 미리보기가 모든 변경 사항을 즉시 반영합니다.
  5. 복사를 클릭하여 생성된 .container { … } 블록을 클립보드에 복사합니다.

생성된 CSS 이해하기

생성기는 다섯 가지 속성을 가진 .container 규칙을 출력합니다: display: grid, grid-template-columns, grid-template-rows, column-gap, row-gap. 스타일시트에 붙여넣고 .container를 자신의 클래스명으로 변경하세요.

자주 사용되는 그리드 패턴

  • 동일 너비 열 — repeat(3, 1fr)로 3열 동일 너비 레이아웃.
  • 사이드바 레이아웃 — 250px 1fr로 고정 사이드바 + 유동 메인 영역.
  • 성배 레이아웃 — 200px 1fr 200px에 행 정의를 추가해 헤더/푸터 고정.
  • 반응형 타일 — repeat(auto-fill, minmax(180px, 1fr))로 모든 화면 너비에 자동 대응.

FAQ

CSS Grid란 무엇인가요?

CSS Grid는 CSS에 내장된 2차원 레이아웃 시스템입니다. 행과 열을 동시에 정의하고 요소를 그리드 컨테이너 내에 정밀하게 배치할 수 있습니다. 페이지 레이아웃, 카드 그리드, 이미지 갤러리, 수평·수직 구조가 모두 필요한 UI에 적합합니다.

grid-template-columns는 무엇을 하나요?

grid-template-columns는 그리드의 열 수와 크기를 정의합니다. 생성기는 기본값으로 repeat(N, 1fr)을 설정합니다. 이는 N개의 동일한 너비의 열로, 각 열이 가용 공간을 균등하게 분배합니다. 200px 1fr 2fr이나 auto-fill minmax(200px, 1fr) 같은 임의의 값으로 재정의할 수 있습니다.

column-gap과 row-gap의 차이는 무엇인가요?

column-gap은 열 사이의 간격, row-gap은 행 사이의 간격을 설정하여 그리드 내부의 거터를 제어합니다. gap: row-gap column-gap 단축 속성으로 한 번에 설정할 수도 있습니다.

1fr 단위란 무엇인가요?

fr은 분수 단위(fractional unit)로, 그리드 컨테이너의 남은 공간을 비율에 따라 분배합니다. 예를 들어 1fr 2fr 1fr은 3열을 만들며 가운데 열이 나머지 두 열의 2배 너비가 됩니다. 반응형 그리드 레이아웃에서 가장 많이 사용되는 단위입니다.

미디어 쿼리 없이 반응형 그리드를 만들 수 있나요?

auto-fill 또는 auto-fit을 minmax()와 함께 사용합니다: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). 최소 크기에 맞게 최대한 많은 열을 자동으로 생성하고 남은 공간을 늘려 채웁니다. 미디어 쿼리가 필요 없습니다.