▦ CSS Grid 생성기

열과 행 개수, 칸 사이 간격을 슬라이더로 조절하면 그 자리에서 미리보기와 함께 grid-template CSS가 만들어집니다. 카드 목록·갤러리·대시보드처럼 규칙적인 레이아웃을 손으로 계산할 필요 없이 복사해 바로 붙여 넣으세요.

사용 방법

1. 열(columns)과 행(rows) 개수를 입력해 격자 뼈대를 만듭니다.
2. 간격(gap) 슬라이더로 칸 사이 여백을 조절합니다. 가로·세로를 따로 주려면 '동일하게' 체크를 해제하세요.
3. 미리보기로 칸 배치를 확인한 뒤 아래 CSS를 복사합니다.
4. 붙여 넣은 부모 요소에 자식 카드들을 넣으면 격자대로 자동 배치됩니다.

자주 묻는 질문

1fr이 무슨 뜻인가요?

fr은 fraction(비율)의 약자로, 남는 공간을 균등하게 나눈 한 조각을 뜻합니다. repeat(3, 1fr)은 부모 폭을 세 칸으로 똑같이 나눕니다.

화면 크기에 따라 열 수가 자동으로 바뀌게 하려면?

grid-template-columns를 repeat(auto-fit, minmax(200px, 1fr))로 바꾸면 폭이 좁아질 때 열 수가 자동으로 줄어드는 반응형 그리드가 됩니다. 안내 문구에도 예시가 있습니다.

생성된 CSS를 그대로 믿어도 되나요?

표준 CSS Grid 속성만 사용하므로 최신 브라우저에서 그대로 동작합니다. 다만 미리보기는 예시 칸으로 보여줄 뿐이니 실제 콘텐츠 높이·정렬은 프로젝트에서 확인하는 참고용으로 활용하세요.