Developer Layout Utility
CSS Grid Generator
columns, rows, gap, minmax, auto-fit, 정렬 옵션을 실시간으로 테스트하고 CSS Grid 코드를 바로 생성할 수 있는 레이아웃 생성 도구입니다.
Grid 설정
Grid 컨테이너의 열, 행, 간격, 정렬, 아이템 개수를 설정하세요.
일반 반복형, 반응형 auto-fit, 직접 입력 모드를 선택합니다.
auto-fit minmax 모드에서 사용됩니다.
custom template 모드에서 사용됩니다. 예: 240px 1fr 1fr, minmax(180px, 1fr) 2fr
생성 결과
현재 CSS Grid 설정 기준 코드입니다.
Grid 설정을 변경한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
Grid 사용 방식 비교
레이아웃 목적에 따라 repeat, auto-fit, 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, 카드 내부 콘텐츠 길이를 함께 확인하는 것이 좋습니다.