무료 CSS Grid 생성기
CSS 그리드를 시각적으로 설계 — 트랙, 단위 및 간격 — 그리고 생성된 CSS 및 HTML을 복사합니다.
CSS 그리드를 시각적으로 설계합니다: 열과 행을 추가하고, fr/px/auto/min-content 단위를 혼합하고, 간격을 조정하고, 실시간 미리보기를 봅니다. 프로덕션 준비가 된 CSS와 일치하는 HTML을 복사합니다.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 16px;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>🔒 모든 것이 브라우저에서 실행됩니다. 아무것도 업로드되지 않습니다.
사용 방법
CSS 그리드를 시각적으로 디자인하세요. 최대 8열 8행을 추가하고, 각 트랙을 fr, px, auto, min/max-content로 설정하며, 행/열 간격을 조정할 수 있습니다. 번호가 매겨진 실시간 미리보기가 즉시 업데이트되며, 생성된 grid-template CSS와 그에 맞는 HTML을 클릭 한 번으로 클립보드에 복사할 수 있습니다.
- 1그리드 구성+와 −로 열과 행을 추가/제거하세요.
- 2트랙 설정각 열과 행마다 단위를 지정합니다(1fr, 100px, auto…).
- 3간격 조정행 간격과 열 간격을 따로 조절하는 슬라이더.
- 4코드 복사바로 사용할 수 있는 CSS와 그에 맞는 HTML 뼈대.
모든 작업이 브라우저에서 실행되며 업로드되는 것은 없습니다.
관련 도구
CSS Flexbox 생성기
flex 방향, 줄바꿈, justify, align을 실시간 항목으로 실험하고 CSS를 복사하세요.
CSS clamp() 생성기
반응형 타이포그래피와 간격을 위한 유동적인 CSS clamp() 값을 생성합니다. 최소/최대 크기와 뷰포트 범위를 설정하고, 라이브 미리보기와 한 줄 CSS를 복사합니다.
인쇄용 용지 — 줄 노트, 모눈종이, 점 격자, 오선지 (PDF)
나만의 용지를 인쇄하세요. 줄 노트(넓은 줄 또는 대학 노트 줄), 모눈종이, 점 격자, 아이소메트릭, 글씨 연습, 오선지, 코넬 노트를 A4, Letter, A5, Legal 크기로, 선 색상은 자유롭게, 필요한 만큼의 쪽수로 만들 수 있습니다. 브라우저에서 만드는 선명한 벡터 PDF입니다.