CSS 그리드 생성기
각 열·행 트랙의 크기(fr / px / auto / minmax)를 지정해 CSS 그리드를 만들고, 실시간 미리보기를 보며 CSS를 복사하세요. 100% 브라우저에서 처리.
명시적 행 없음 — 콘텐츠가 자동 행으로 흐릅니다. 행 크기를 지정하려면 추가하세요.
실시간 미리보기
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
🔒 브라우저에서 생성되며 업로드되지 않습니다.
문법을 외우지 않고 CSS 그리드 만들기
필요한 만큼 열·행 트랙을 추가하고 각 트랙에 1fr·200px·auto·min-content·minmax(100px, 1fr) 같은 크기를 개별 지정하세요. 셀 간격(gap)과 아이템 정렬을 정하면 그에 맞는 display: grid 규칙(grid-template-columns/grid-template-rows)을 자동으로 만들어 줍니다. 값을 바꿀 때마다 레이아웃이 갱신되는 실시간 미리보기가 함께 표시됩니다.
모든 처리는 브라우저에서 실행되어 업로드나 회원가입이 없습니다. 생성된 CSS를 스타일시트에 바로 붙여넣으세요.
자주 묻는 질문
열마다 너비를 다르게 할 수 있나요?
네. 각 트랙에 자체 크기 입력란이 있습니다 — 200px 사이드바 옆에 1fr 본문처럼 고정·유연 트랙을 섞거나, minmax(100px, 1fr)로 최소값과 남은 공간 사이에서 늘어나는 트랙을 만들 수 있습니다.
행(rows)을 꼭 지정해야 하나요?
아니요. 행 목록을 비워 두면 아이템이 채워지는 대로 행이 자동 생성됩니다 — 대부분의 콘텐츠 그리드가 원하는 방식입니다. 특정 행 높이가 필요할 때만 행 트랙을 추가하세요.
어떤 트랙 크기를 입력할 수 있나요?
fr 단위, px/%/em/rem 길이, auto, min-content, max-content, 그리고 minmax()/fit-content()를 지원합니다. 인식되지 않는 값은 1fr로 대체되어 복사한 CSS가 항상 유효합니다.
gap과 justify-items의 차이는 무엇인가요?
gap은 그리드 셀 사이의 간격이고, justify-items·align-items는 각 아이템이 자기 셀 안에서 어떻게 배치될지(채우기 stretch, 또는 start·center·end)를 정합니다.
입력한 내용이 업로드되나요?
아니요. CSS는 전부 브라우저에서 생성되며 서버로 전송되지 않습니다.