CSS Grid 생성기
CSS Grid 레이아웃을 시각적으로 설계하고 완성된 CSS 코드를 바로 복사하세요.
3
3
8px
repeat(3, 1fr)
repeat(3, 1fr)
미리보기
1
2
3
4
5
6
7
8
9
셀을 클릭하여 선택할 수 있습니다.
CSS 코드
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
}사용방법: 열(Columns)과 행(Rows) 슬라이더로 그리드 크기를 조절하고, 간격(Gap)을 설정합니다. 열/행 단위를 fr(비율), px(픽셀), auto 중에서 선택할 수 있습니다. 미리보기 영역에서 실제 그리드가 즉시 확인되며, 생성된 CSS 코드를 복사 버튼으로 바로 가져갈 수 있습니다.
추천 대상: CSS Grid를 처음 배우는 개발자, 레이아웃 시안을 빠르게 잡고 싶은 퍼블리셔, fr/px/auto 단위의 차이를 시각적으로 이해하고 싶은 분에게 유용합니다.
핵심 기능: 최대 12열 × 12행 설정, fr·px·auto 단위 선택, 갭 크기 조절(0~48px), 데스크톱·태블릿·모바일 미리보기 전환, CSS 코드 즉시 복사.
FAQ: Q. fr 단위란 무엇인가요? A. fr(fraction)은 사용 가능한 공간을 비율로 나누는 단위입니다. 예: 1fr 1fr 1fr은 3등분입니다. Q. 생성된 코드를 바로 사용할 수 있나요? A. 네, .grid-container 클래스에 그대로 붙여넣으면 됩니다.
팁: 미리보기 너비를 모바일로 전환하면 좁은 화면에서의 그리드 배치를 미리 확인할 수 있습니다.