로컬 CSS Grid 생성기

눈으로 확인하며 CSS Grid를 만드세요

행·열·간격을 선택하고 레이아웃을 즉시 확인한 뒤 다음 인터페이스에 쓸 CSS를 복사하세요.

* 모든 처리는 브라우저에서 진행됩니다. 레이아웃 데이터는 업로드되지 않습니다.

열행간격 (px)

CSS 준비 완료

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 16px;

123456

QUICK GUIDE

배포 전에 이해할 수 있는 그리드

Start with the number of content tracks your layout needs.

Use equal flexible tracks for cards that should share the available width.

Adjust gap to establish rhythm without hand editing several declarations.

Paste the generated rules into the grid container and tune the content separately.

FAQ

What does minmax(0, 1fr) do?

It gives each track an equal share while allowing content to shrink instead of forcing overflow.

Can I create named areas here?

GridBox covers the common track-and-gap setup. Add grid-template-areas when your layout needs named regions.

Does the preview use the same CSS?

Yes. The preview applies the selected rows, columns, and gap values directly in this browser.