Grid 생성기

컬럼 수, gap, 아이템 수를 조정해 CSS Grid 레이아웃 코드를 생성합니다.

언제 사용하나요?

상품 카드 목록, 대시보드 위젯, 이미지 갤러리, 설정 패널처럼 일정한 칸 구조가 필요한 UI를 만들 때 사용합니다. 컬럼 수와 gap을 바꾸며 미리보기로 배치를 확인하고, 바로 붙여 넣을 CSS Grid 코드를 얻을 수 있습니다.

사용 방법

컬럼 수와 gap 값을 설정합니다.
아이템 수를 조정해 실제 목록 개수와 비슷하게 미리 봅니다.
미리보기에서 그리드 레이아웃을 확인합니다.
생성된 CSS Grid 코드를 복사합니다.

입력값 안내

그리드의 컬럼(열) 개수, 컬럼 간격(gap), 자식 아이템 개수를 설정합니다. 카드 목록처럼 균등한 칸을 만들 때는 repeat 컬럼 구조가 적합합니다.

계산·변환 기준

입력된 컬럼 수를 기반으로 `grid-template-columns: repeat([Columns], 1fr)` 속성을 생성하고, 간격은 `gap` 속성에 적용하여 CSS 규칙을 빌드한 후, 그리드 컨테이너의 인라인 스타일에 반영해 레이아웃을 표시합니다.

사용 예시

그리드 초안 작성 - 반복 컬럼 기반의 카드 목록, 갤러리, 대시보드 CSS를 빠르게 만듭니다.
간격 조정 비교 - gap 값을 바꾸며 카드 사이 여백이 너무 좁거나 넓지 않은지 확인합니다.
디자인 리뷰 보조 - 생성된 CSS를 문서나 리뷰 코멘트에 붙여 레이아웃 의도를 명확하게 공유합니다.

예시

컬럼 3개, 간격 16px → display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
컬럼 4개, 간격 24px → 상품 목록용 grid 레이아웃 코드 생성
컬럼 2개, gap 12px → 모바일 설정 카드 2열 배치 초안

주의사항

생성된 CSS Grid 코드는 참고용입니다. IE 11에서는 -ms- 프리픽스 문법이 필요할 수 있습니다.
입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

CSS Grid 핵심 속성

grid-template-columns와 grid-template-rows로 열과 행 크기를 정의합니다. fr 단위는 남은 공간을 비율로 나눠 가집니다.

gap과 자동 배치

gap으로 셀 간격을 조절하고, grid-auto-flow로 자동 배치 방향을 설정합니다. 복잡한 레이아웃은 grid-area로 이름을 붙여 named template을 쓰면 관리하기 좋습니다.

카드 목록 레이아웃

상품 카드, 도구 목록, 이미지 갤러리처럼 같은 형태의 아이템이 반복되는 화면은 Grid가 잘 맞습니다. 컬럼 수와 gap을 먼저 정하면 레이아웃 밀도를 빠르게 비교할 수 있습니다.

반응형 확장

생성된 repeat 컬럼 코드를 auto-fit과 minmax 조합으로 바꾸면 화면 폭에 따라 칸 수가 자동으로 줄어드는 반응형 그리드를 만들 수 있습니다.

자주 묻는 질문

어떤 Grid 코드를 생성하나요?

repeat(n, minmax(0, 1fr)) 기반의 기본 grid-template-columns를 생성합니다.

격자 배치를 미리 볼 수 있나요?

네. 컬럼 수와 간격을 바꾸면 미리보기 격자가 즉시 갱신됩니다.

반응형 격자도 만들 수 있나요?

repeat·minmax 기반 코드라, auto-fit으로 바꾸면 화면 폭에 따라 칸 수가 조절되는 반응형 격자가 됩니다.

행 높이도 조절할 수 있나요?

컬럼 수와 간격을 조절해 기본 격자를 만들며, 생성된 코드에서 grid-template-rows를 더해 행 높이를 지정할 수 있습니다.

Grid와 Flexbox 중 언제 Grid를 쓰나요?

행과 열을 함께 제어하는 카드 목록이나 갤러리는 Grid가 적합하고, 한 줄 방향 정렬은 Flexbox가 더 단순합니다.

gap은 margin과 다른가요?

gap은 그리드 셀 사이 간격을 컨테이너가 관리합니다. 각 아이템에 margin을 따로 주는 방식보다 목록 레이아웃을 일정하게 유지하기 쉽습니다.