이런 분께 유용합니다
- 카드·갤러리·대시보드 레이아웃을 만드는 개발자
- repeat와 auto-fit 차이를 미리보기로 배우는 입문자
- 사이드바와 본문처럼 비대칭 열을 설계하는 운영자
Developer Layout Utility
CSS Grid Generator
columns, rows, gap, minmax, auto-fit, 정렬 옵션을 실시간으로 테스트하고 CSS Grid 코드를 바로 생성할 수 있는 레이아웃 생성 도구입니다.
Grid 레이아웃 생성
columns, rows, gap, minmax 값을 조절해 카드형 Grid 레이아웃을 빠르게 만들 수 있습니다.
실시간 미리보기
설정 변경 시 Grid 배치, 간격, 아이템 높이, 정렬 상태를 즉시 확인할 수 있습니다.
CSS 코드 복사
생성된 grid-template, gap, align-items, justify-items 코드를 복사하거나 CSS 파일로 저장할 수 있습니다.
Grid 설정
Grid 컨테이너의 열, 행, 간격, 정렬, 아이템 개수를 설정하세요.
빠른 프리셋
자주 사용하는 Grid 패턴을 바로 적용할 수 있습니다.
일반 반복형, 반응형 auto-fit, 직접 입력 모드를 선택합니다.
1
3개
8
1
2개
6
2
6개
24
0px
18px
60px
0px
18px
60px
120px
220px
360px
auto-fit minmax 모드에서 사용됩니다.
80px
120px
220px
0px
24px
60px
0px
20px
40px
custom template 모드에서 사용됩니다. 예: 240px 1fr 1fr, minmax(180px, 1fr) 2fr
Live Preview
Mode
repeat
Columns
3
Gap
18px / 18px
생성 결과
현재 CSS Grid 설정 기준 코드입니다.
Grid 설정을 변경한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
Grid 사용 방식 비교
레이아웃 목적에 따라 repeat, auto-fit, custom template 방식을 선택할 수 있습니다.
repeat columns
반복 열
auto-fit minmax
반복 열
custom template
반복 열
CSS Grid 열·간격·반응형 최소 너비를 실제 콘텐츠에 맞게 설계하는 법
Grid 코드는 같은 열 개수라도 컨테이너 너비와 콘텐츠의 최소 크기에 따라 전혀 다르게 보입니다. 프리셋은 시작점으로 사용하고 긴 제목, 확대 화면과 좁은 기기에서 넘침이 없는지 확인해야 합니다.
대표 활용 상황
- 고정 열 카드 목록을 빠르게 시작할 때
- minmax와 auto-fit으로 반응형 목록을 만들 때
- 사용자 정의 grid-template-columns 문법을 안전하게 시험할 때
처음부터 결과 확인까지
- 1
고정 열, auto-fit 또는 사용자 정의 중 레이아웃 목적에 맞는 모드를 선택합니다.
- 2
실제 카드가 유지해야 할 최소 너비와 컨테이너에서 예상하는 열 수를 정합니다.
- 3
행 높이, 열·행 간격과 내부 여백을 콘텐츠 밀도에 맞춰 조절합니다.
- 4
정렬 옵션을 바꾸며 짧고 긴 아이템이 섞였을 때의 차이를 확인합니다.
- 5
생성된 CSS를 실제 HTML에 적용하고 좁은 화면, 200% 확대와 긴 번역 문구로 시험합니다.
- 6
필요하면 미디어 쿼리와 min-width: 0 같은 프로젝트별 보정 규칙을 추가합니다.
반응형 카드 목록
- 입력
- auto-fit, minmax(220px, 1fr), gap 20px
- 결과
- 가용 너비에 따라 열 수가 줄고 늘어나는 카드 Grid
카드의 실제 최소 너비가 220px보다 작아질 수 있는지 콘텐츠와 함께 확인합니다.
고정 사이드바
- 입력
- custom: 260px minmax(0, 1fr)
- 결과
- 260px 사이드바와 남은 너비를 쓰는 본문
본문의 긴 콘텐츠가 넘치지 않도록 유연한 열의 최소값을 0으로 둡니다.
계산·처리 기준
선택한 모드에 따라 repeat(n, 1fr), repeat(auto-fit, minmax(min, 1fr)) 또는 검증된 사용자 정의 값을 grid-template-columns에 넣습니다. 사용자 정의 값은 200자 이하로 제한하고 위험 구분 문자를 거부하며 브라우저의 CSS.supports로 문법을 확인합니다.
알아둘 한계
- 숫자 아이템은 실제 긴 텍스트·이미지의 최소 크기를 재현하지 않습니다.
- grid areas와 부모·자식 subgrid 구성을 조립하는 전용 조작 항목은 없습니다.
- 미디어 쿼리나 브라우저별 보정은 자동 생성하지 않습니다.
- auto-fit도 최소 열 너비와 여백보다 화면이 좁으면 넘칠 수 있습니다.
개인정보 처리
레이아웃 값과 사용자 정의 템플릿은 브라우저에서만 처리하며 서버로 전송하지 않습니다.
참고 자료
함께 쓰면 좋은 도구
- Flexbox Playground
한 방향 배치와 정렬 옵션을 비교합니다.
- CSS Clamp 생성기
반응형 간격과 글자 크기의 clamp 값을 계산합니다.
자주 묻는 질문
auto-fit과 고정 repeat 중 무엇을 써야 하나요?
열 수가 화면에 따라 자연스럽게 바뀌어야 하면 auto-fit, 항상 정해진 열 구조가 필요하면 고정 repeat가 출발점입니다.
사용자 정의 값에 전체 CSS를 붙여 넣어도 되나요?
아닙니다. grid-template-columns 속성값만 200자 이내로 입력할 수 있습니다.
미리보기가 맞으면 실제 페이지도 안전한가요?
실제 콘텐츠 길이와 이미지 최소 크기가 다르므로 프로젝트 화면에서 반응형·확대 테스트가 필요합니다.