CSS Grid 생성기
columns, rows, gap을 조절해 기본 CSS Grid container 선언을 생성합니다.
사용 방법
- 열·행 개수와 gap px를 조절합니다.
핵심 기능과 처리 범위
열은 repeat(columns,minmax(0,1fr)), 행은 repeat(rows,minmax(64px,auto))로 고정 pattern을 쓰고 live sample을 표시합니다.
처리 원리
display:grid, grid-template-columns, grid-template-rows, gap 네 선언을 조합합니다.
예시
4 columns, 2 rows, 16px gap이면 4×2 preview와 해당 CSS가 나옵니다.
이럴 때 유용합니다
- 균등 column grid의 빠른 layout scaffold를 만들 때
사용 전 참고
- named area, auto-fit/minmax breakpoint, 개별 item placement는 생성하지 않습니다.
자주 묻는 질문
responsive auto-fit도 지원하나요?
아닙니다. 현재는 명시적 repeat 열·행 수를 사용합니다.