Developer Layout Utility
CSS Grid Generator
columns, rows, gap, minmax, auto-fit 설정을 실시간으로 테스트하고 CSS Grid 코드를 바로 생성할 수 있습니다.
Grid 레이아웃 생성
columns, rows, gap 값을 조절해 레이아웃 생성
실시간 미리보기
설정 변경 시 Grid 배치를 즉시 확인
CSS 코드 복사
grid-template 코드를 바로 복사·다운로드
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
custom template 모드에서 사용됩니다. 예: 240px 1fr 1fr
Live Preview
Mode
repeat
Columns
3
Gap
18px / 18px
생성 결과
현재 CSS Grid 설정 기준 코드입니다.
Grid 설정을 변경한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
CSS Grid Generator란?
CSS Grid 레이아웃을 실시간으로 실험하고 grid-template-columns, gap, minmax 코드를 자동 생성하는 도구입니다.
repeat와 auto-fit 차이
repeat(3, 1fr): 고정된 열 개수로 배치합니다.repeat(auto-fit, minmax(...)): 화면 너비에 따라 열 개수가 자동 조정됩니다.- 반응형 카드 목록에는 auto-fit minmax 방식이 자주 사용됩니다.
추천 활용
카드 리스트, 이미지 갤러리, 관리자 대시보드, 유틸리티 목록, 블로그 목록 레이아웃 제작에 활용하기 좋습니다.