이 도구에 대하여
CSS Grid 생성기는 열 개수, 행 개수, 간격이라는 세 가지 간단한 컨트롤을 바로 붙여 넣을 수 있는 CSS 그리드 레이아웃으로 바꿔 주는 무료 브라우저 내 도구입니다. 값을 설정하고 실시간 미리보기가 다시 그려지는 것을 보며 생성된 규칙을 복사하세요.
열과 행은 1부터 12까지의 정수이며(기본값 3과 2), 간격은 0부터 40픽셀까지의 슬라이더입니다(기본값 10). 두 차원 모두 repeat()와 1fr 단위로 작성되므로 모든 트랙이 사용 가능한 공간을 균등하게 나눕니다. 미리보기는 각 셀을 번호가 매겨진 색상 블록으로 채워 트랙 구조를 한눈에 볼 수 있게 하며, 출력은 display: grid, grid-template-columns, grid-template-rows, gap을 사용하는 순수한 .grid 규칙입니다. 한 번의 클릭으로 클립보드에 복사됩니다.
모든 처리는 전적으로 브라우저에서 이뤄집니다. 업로드도, 계정도, 추적도 없으며, 페이지가 로드된 뒤에는 오프라인에서도 계속 작동합니다.
자주 묻는 질문
트랙 크기는 어떻게 정해지나요?
열과 행 모두 repeat()와 1fr 단위로 작성되므로 모든 트랙이 사용 가능한 공간을 균등하게 나눕니다.
간격 컨트롤은 무엇을 하나요?
모든 셀 사이의 그리드 간격을 0부터 40까지 픽셀 단위로 설정하며, 미리보기와 생성된 CSS 양쪽에 실시간으로 적용됩니다.
컨트롤은 어떤 범위를 허용하나요?
열과 행은 1부터 12까지의 정수를 받고, 간격 슬라이더는 0부터 40픽셀까지입니다. 범위를 벗어나거나 숫자가 아닌 입력은 제한되며 기본값인 열 3, 행 2, 간격 10px로 대체됩니다.
어떤 CSS를 출력하나요?
display: grid, 각각 repeat()와 1fr로 설정된 grid-template-columns와 grid-template-rows, 그리고 픽셀 단위 gap을 담은 .grid 규칙입니다. Copy 버튼은 그 규칙 그대로를 클립보드에 담습니다.