CSS 그리드 생성기

열, 행 및 간격을 시각적으로 정의한 다음 레이아웃에 대한 CSS 그리드 템플릿 코드를 복사하세요.

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

열, 행, 간격을 시각적으로 정의한 다음 CSS 그리드 템플릿 코드를 복사하세요.
브라우저에서 실행됩니다.
무료로 사용 가능

사용 방법

열 및 행 수를 설정합니다.
간격과 트랙 크기를 조정합니다.
그리드 CSS를 복사합니다.

How this tool works

열 및 행 수를 설정합니다.
간격과 트랙 크기를 조정합니다.
그리드 CSS를 복사합니다.

Recommended settings

먼저 기본 옵션을 사용한 다음 필요한 경우 조정하세요.

Supported formats

Text / on-page input

File size and limits

매우 복잡한 다중 레이어 미리보기는 구형 휴대폰에서 느리게 느껴질 수 있습니다.

Privacy

색상 및 CSS 생성기는 브라우저에서 완전히 실행됩니다. 미리보기 및 변환에서는 스타일을 업로드하지 않습니다.

Common use cases

필요할 때마다 CSS 그리드 생성기를 사용하세요. 열, 행, 간격을 시각적으로 정의한 다음 CSS 그리드 템플릿 코드를 복사하세요.

Troubleshooting

붙여넣은 후 미리보기가 다르게 보입니다.

페이지에 경쟁 CSS가 있는지 확인하세요(재설정, 상속된 색상). 먼저 생성된 규칙을 격리된 스타일시트에 복사합니다.

FAQ

내 CSS가 업로드되나요?

아니요. 생성기와 변환기는 실시간 미리보기를 통해 브라우저에서 실행됩니다.

계정이 필요합니까?

아니요. 도구를 열고 컨트롤을 조정한 후 CSS를 복사하세요.