무료 변환기
CSS 그리드 레이아웃 생성기
실시간 미리보기를 통해 CSS 그리드 레이아웃을 시각적으로 생성합니다. 무료 및 클라이언트 측에서 그리드 템플릿 열, 행, 간격, 정렬 항목, 정렬 항목 등을 조정합니다.
실시간 미리보기
1
2
3
4
5
6
열 (repeat(3, 1fr))
행 (repeat(2, 1fr))
기둥 간격 (12px)
0px16px32px
행 간격 (12px)
0px16px32px
정당화 항목
항목 정렬
CSS 출력
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
column-gap: 12px;
row-gap: 12px;
justify-items: stretch;
align-items: stretch;
}
.item {
padding: 1rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-align: center;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}