도구 소개
CSS Grid 생성기는 균등하게 나눈 2차원 격자를 만듭니다. 행과 열 수는 각각 1~12의 정수로 제한됩니다. 미리보기 요소 수는 열 수와 행 수의 곱이며 최대 144개입니다.
사용 방법
- 열 수와 행 수에 각각 1~12의 정수를 입력하세요.
- 열 간격과 행 간격을 조절하세요.
- 실시간으로 생성되는 격자와 번호가 있는 요소를 확인하세요.
- CSS를 복사하여 프로젝트의 격자 컨테이너에 적용하세요.
사용 예제
- 3열 × 2행이면 항목 6개를 표시합니다.
- 12열 × 12행이면 이 페이지의 최대치인 항목 144개를 표시합니다.
- 열 간격을 24px, 행 간격을 12px로 설정하여 두 방향의 여백을 비교하세요.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}작동 원리 및 CSS 설명
repeat(n, 1fr)는 균등한 트랙 n개를 만듭니다. 1fr는 컨테이너의 사용 가능한 공간 중 한 몫을 배분합니다. column-gap과 row-gap은 각각 열 사이와 행 사이의 간격을 설정하며 같으면 gap 축약형을 사용할 수 있습니다.
주요 용도
- 카드 목록과 이미지 갤러리를 만듭니다.
- 대시보드의 균등 분할 레이아웃을 설계합니다.
- repeat(), fr, gap의 역할을 배웁니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
CSS Grid와 Flexbox는 어떻게 다른가요?
Grid는 행과 열을 함께 제어하는 2차원 레이아웃에 적합합니다. Flexbox는 주로 하나의 주축을 중심으로 요소를 배치합니다.
1fr는 무엇을 뜻하나요?
fr는 남은 사용 가능 공간의 비율을 뜻합니다. 모든 트랙이 1fr이면 일반적으로 공간을 균등하게 나눕니다.
repeat(3, 1fr)는 무엇을 뜻하나요?
1fr 1fr 1fr와 같으며, 균등한 트랙 세 개를 뜻합니다.
gap과 margin은 어떻게 다른가요?
gap은 격자 트랙 사이의 간격을 조절하며 컨테이너 바깥에 여백을 추가하지 않습니다. margin은 요소 자체의 바깥 여백입니다.
행·열 수는 왜 최대 12인가요?
각 방향을 최대 12로 제한하면 미리보기 요소가 144개를 넘지 않아 지나치게 큰 입력으로 페이지가 느려지는 일을 방지합니다.