CSS Grid 생성기 무료 온라인: 그리드 레이아웃 시각적 디자인
7 회 사용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 = 동일한 두 열.
나중에 사용할 수 있도록 그리드 레이아웃을 저장할 수 있나요?
현재 이 도구는 인터페이스 내에서 직접 레이아웃을 저장하는 기능이 없습니다. 생성된 CSS 코드를 복사하여 문서나 프로젝트에 붙여넣어야 합니다. 많은 사용자가 코드를 복사하여 코드 편집기의 전용 '스니펫' 폴더에 저장합니다. 향후 업데이트를 위해 영구 저장 기능을 고려하고 있습니다.
그리드 아이템 안에 중첩된 그리드를 만들 수 있나요?
네, 가능합니다. 그리드 아이템에 display: grid를 적용하면 그 자체로 그리드 컨테이너가 됩니다. 이 생성기는 한 번에 하나의 그리드만 처리하므로, 중첩된 각 레벨마다 CSS를 따로 복사해야 합니다. 2단계 레이아웃의 경우 먼저 바깥쪽 그리드를 디자인한 다음, 안쪽 아이템용 두 번째 그리드를 만드세요. 이렇게 하면 코드가 모듈화되어 디버깅이 훨씬 쉬워집니다.
사용 방법
- 열과 행 수 정의
- 셀 간 gap 조절
- 실시간 그리드 미리보기
- 생성된 CSS 코드 복사