CSS Grid Generator
복잡한 그리드 레이아웃을 시각적으로 설계하고 코드를 즉시 생성하세요.
💻 CSS Code
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 20px 20px;
📖 사용 방법
- Structure: 행과 열의 개수를 입력하여 기본 그리드 판을 만듭니다. (최대 12개)
- Gap: 그리드 사이의 간격을 가로/세로 별도로 지정할 수 있습니다.
-
Template Sizes:
1fr과 같은 단일 수치뿐만 아니라1fr 2fr 1fr처럼 공백으로 구분하여 각 칸의 크기를 상세하게 정의할 수 있습니다. - Real-time: 모든 설정은 우측 캔버스에 실시간으로 반영되며, 하단에서 완성된 코드를 즉시 복사할 수 있습니다.