CSS 그리드 레이아웃 생성기
열·행·간격을 조절해 CSS Grid 코드를 즉시 생성
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
웹 퍼블리셔와 프론트엔드 개발자를 위한 CSS Grid 레이아웃 도구입니다. 열과 행의 개수, 각 트랙의 크기(1fr, 고정 px, auto, minmax 등), 간격(gap)을 슬라이더와 셀렉트로 조정하면 미리보기가 실시간으로 바뀌고, 완성된 CSS와 HTML 코드를 바로 복사해 프로젝트에 붙여넣을 수 있습니다. 모든 계산은 브라우저 안에서만 이뤄지며 서버로 데이터가 전송되지 않습니다.
사용 방법
- 슬라이더로 열(Columns)과 행(Rows) 개수를 각각 1~6개 사이로 설정합니다.
- 간격(Gap) 슬라이더로 그리드 아이템 사이 여백을 0~40px 범위에서 조정합니다.
- 열 크기 지정과 행 크기 지정에서 각 트랙에 1fr, 2fr, 고정 px, auto, minmax 등 원하는 크기 단위를 선택합니다.
- 미리보기로 결과를 확인한 뒤 하단의 '코드 복사' 버튼으로 완성된 CSS/HTML을 복사합니다.
자주 묻는 질문
- 생성된 코드를 실제 프로젝트에 그대로 써도 되나요?
- 네, grid-container와 grid-item 클래스를 기준으로 작성된 표준 CSS Grid 코드이므로 그대로 붙여넣고 클래스명이나 아이템 개수만 원하는 대로 조정하면 됩니다.
- 열이나 행을 7개 이상으로 만들 수 있나요?
- 현재 슬라이더는 최대 6개까지 지원합니다. 더 많은 트랙이 필요하면 복사한 CSS의 grid-template-columns/rows 값을 직접 확장하면 됩니다.
- grid-template-columns에 minmax(100px, 1fr)를 쓰면 어떤 효과가 있나요?
- 해당 열의 최소 너비를 100px로 보장하면서 남는 공간은 1fr 비율로 유연하게 늘어나게 해, 반응형 레이아웃에서 콘텐츠가 너무 좁아지지 않도록 막아줍니다.