CSS Grid 생성기 무료 온라인: 그리드 레이아웃 시각적 디자인
2 회 사용10px
CSS Grid 팁
열과 행
열과 행 수를 정의하세요. 유연한 단위(fr) 또는 고정(px, %). 그리드 자동 생성.
Gap — 셀 간 간격
행과 열 사이 간격 조절. 균일한 gap은 깔끔한 레이아웃.
CSS 코드 준비
grid-template-columns, rows, gap 자동 생성.
자주 묻는 질문
CSS Grid란?
행과 열로 그리드를 만드는 2D 레이아웃 시스템. 복잡한 레이아웃에 Flexbox보다 강력.
Grid vs Flexbox?
Grid는 2D. Flexbox는 1D. 결합도 가능.
fr이란?
사용 가능한 공간을 비례 배분하는 유연한 단위. 1fr 1fr = 동일한 두 열.
사용 방법
- 열과 행 수 정의
- 셀 간 gap 조절
- 실시간 그리드 미리보기
- 생성된 CSS 코드 복사