이런 분께 유용합니다
- 카드·갤러리·대시보드 레이아웃을 만드는 개발자
- 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 Generator란?
CSS Grid Generator는 Grid 레이아웃을 실시간으로 실험하고 grid-template-columns, gap, minmax, auto-fit 코드를 자동 생성하는 개발자 유틸리티입니다.
카드 리스트, 이미지 갤러리, 관리자 대시보드, 유틸리티 목록, 블로그 목록, 랜딩페이지 섹션 레이아웃 제작에 활용할 수 있습니다.
지원 기능
- repeat 기반 고정 열 Grid 생성
- auto-fit minmax 기반 반응형 Grid 생성
- custom grid-template-columns 직접 입력
- column gap, row gap, item height 조절
- justify-items, align-items 정렬 설정
- container padding, item radius 조절
- 실시간 미리보기와 CSS 코드 복사 및 다운로드
repeat와 auto-fit의 차이는 무엇인가요?
repeat(3, 1fr)은 항상 3개의 열을 유지합니다. 반면 repeat(auto-fit, minmax(220px, 1fr))은 화면 너비에 따라 열 개수가 자동으로 조정됩니다.
auto-fit minmax는 언제 사용하면 좋나요?
카드 목록, 상품 목록, 이미지 갤러리처럼 화면 크기에 따라 자연스럽게 줄바꿈되어야 하는 레이아웃에 적합합니다. 반응형 페이지를 만들 때 가장 자주 사용하는 Grid 패턴 중 하나입니다.
custom template은 어떤 경우에 쓰나요?
240px 1fr처럼 사이드바와 본문을 나누거나, 1fr 2fr 1fr처럼 비율이 다른 열을 만들 때 사용합니다.
gap과 padding은 어떻게 다르나요?
gap은 Grid 아이템 사이의 간격이고, padding은 Grid 컨테이너 내부 여백입니다. 카드 목록에서는 gap으로 카드 사이 간격을 만들고 padding으로 전체 컨테이너 여백을 조절합니다.
생성된 CSS를 바로 사용해도 되나요?
생성된 코드는 기본 Grid 레이아웃 코드입니다. 실제 프로젝트에 적용할 때는 부모 요소 너비, 반응형 breakpoint, 카드 내부 콘텐츠 길이를 함께 확인하는 것이 좋습니다.
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로 문법을 확인합니다.
알아둘 한계
- 미리보기는 예시 숫자 아이템이라 실제 텍스트·이미지의 최소 크기를 재현하지 않습니다.
- subgrid, named line, grid-template-areas와 masonry는 생성하지 않습니다.
- 오래된 브라우저와 임베디드 웹뷰의 지원 차이를 자동 검사하지 않습니다.
- 생성 코드만으로 DOM 읽기 순서나 키보드 탐색 순서가 바뀌지는 않습니다.
개인정보 처리
레이아웃 값과 사용자 정의 템플릿은 브라우저에서만 처리하며 서버로 전송하지 않습니다.
참고 자료
함께 쓰면 좋은 도구
- Flexbox Playground
한 방향 배치와 정렬 옵션을 비교합니다.
- CSS Clamp 생성기
반응형 간격과 글자 크기의 clamp 값을 계산합니다.
자주 묻는 질문
auto-fit과 고정 repeat 중 무엇을 써야 하나요?
열 수가 화면에 따라 자연스럽게 바뀌어야 하면 auto-fit, 항상 정해진 열 구조가 필요하면 고정 repeat가 출발점입니다.
사용자 정의 값에 전체 CSS를 붙여 넣어도 되나요?
아닙니다. grid-template-columns 속성값만 200자 이내로 입력할 수 있습니다.
미리보기가 맞으면 실제 페이지도 안전한가요?
실제 콘텐츠 길이와 이미지 최소 크기가 다르므로 프로젝트 화면에서 반응형·확대 테스트가 필요합니다.