CSS Grid 빌더
균등한 열과 행의 수, 사이 간격을 설정하세요. 레이아웃을 미리 보고 CSS를 복사할 수 있습니다.
CSS Grid 빌더
실시간 그리드 미리 보기
그리드 값을 바꾸면 미리 보기와 CSS가 갱신됩니다.
사용 방법
사용 방법
- 열과 행을 1~12개, 간격을 0~64픽셀로 설정합니다.
- 실시간 그리드 미리 보기를 확인합니다.
- 생성된 CSS를 스타일시트에 복사합니다.
일반 레이아웃 실시간 미리 보기
열, 행, 픽셀 간격을 바꾸면 미리 보기가 즉시 갱신됩니다. 각 행·열 위치에 번호가 있는 셀을 표시합니다.
범위가 명확한 복사 가능한 CSS
출력은 동일한 minmax(0, 1fr) 열과 최소 높이 64 px 행을 사용합니다. 이름 영역, 서로 다른 트랙 크기, 반응형 중단점, 개별 항목 배치는 편집하지 않습니다.
브라우저에서 생성
미리 보기와 CSS는 이 페이지 안에서 만들어지며 서버로 전송되지 않습니다.
자주 묻는 질문
더 알아보기
열마다 너비를 다르게 설정할 수 있나요?
아니요. 모든 열은 같은 분수 너비를 사용합니다. 다른 트랙 크기가 필요하면 생성된 CSS를 직접 수정하세요.
그리드 영역에 이름을 붙일 수 있나요?
아니요. 이 버전은 균등한 행과 열, 간격만 설정합니다.
간격 단위는 무엇인가요?
0~64 사이의 정수 CSS 픽셀입니다.