CSS Grid 생성기
CSS Grid 레이아웃을 시각적으로 만들고 코드를 생성하세요.
1
2
3
4
5
6
7
8
9
x
8px
8px
프리셋
CSS
/* Container */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
column-gap: 8px;
row-gap: 8px;
}CSS Grid 생성기 안내
이 무료 온라인 도구로 CSS Grid 레이아웃을 시각적으로 만들 수 있습니다. 행/열 수를 설정하고, 템플릿 값과 간격을 조절한 후 셀을 클릭하여 스팬을 조절하세요.
기능
- 행/열 수 설정 (최대 8x8)
- grid-template-columns/rows 직접 편집 (fr, px, auto, minmax)
- column-gap / row-gap 슬라이더
- 셀 클릭으로 grid-column/grid-row span 조절
- 4가지 프리셋: Holy Grail, Dashboard, Gallery, Sidebar
- CSS 코드 자동 생성 + 원클릭 복사
Related Tools
🎨Color Picker
HEX, RGB, HSL converter🌈CSS Gradient
Visual gradient builder🎨Color Palette
Color harmony generator✏️SVG Editor
Edit & optimize SVG