UTILS.
100% 브라우저 내 실행

CSS Grid 생성기

열, 행, 간격을 조절해 CSS 그리드 레이아웃을 생성하고 실시간으로 미리보세요.

이 도구에 대하여

열과 행의 개수와 간격을 설정해 CSS 그리드를 만들고 코드를 복사하세요. 모든 작업이 브라우저 안에서 이루어집니다.

자주 묻는 질문

트랙 크기는 어떻게 정해지나요?
열과 행은 repeat()와 1fr을 사용해 사용 가능한 공간을 균등하게 나눠 갖습니다.
간격 컨트롤은 무엇인가요?
모든 셀 사이의 그리드 간격을 픽셀 단위로 설정하며, 미리보기에 실시간으로 적용됩니다.

더 많은 도구