CSS Grid 생성기

CSS Grid 레이아웃을 시각적으로 만듭니다

열·행 개수와 간격을 슬라이더로 잡거나 grid-template-columns 값을 직접 입력할 수 있고, 2·3·4 균등, 사이드바(250px 1fr), 양쪽 사이드바, 12 그리드, Auto-fill 프리셋이 준비돼 있습니다. 입력한 템플릿에서 repeat(n, ...)이나 공백 구분 트랙을 읽어 미리보기 열 개수를 자동으로 맞추므로 문법이 틀리면 바로 눈에 띕니다. justify-items·align-items까지 포함된 컨테이너 CSS가 나오며, 대시보드나 카드 목록 골격을 잡는 첫 단계에 쓰기 좋습니다.

이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.

컬럼 프리셋

grid-template-columns

grid-template-rows

justify-items

align-items

Columns 3

Rows 3

Gap 10px

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
  justify-items: stretch;
  align-items: stretch;
}

Grid, 이렇게 쓰세요

행·열 개수와 간격을 조절하고 grid-template 값을 시각적으로 만들어 CSS Grid 코드를 생성합니다.

카드 목록·대시보드·갤러리처럼 행과 열이 함께 있는 레이아웃을 빠르게 잡을 때 씁니다.

repeat(auto-fill, minmax(240px, 1fr)) 처럼 쓰면 미디어 쿼리 없이 반응형이 됩니다. fr 단위는 남은 공간을 비율로 나눕니다.

자주 묻는 질문

Q. auto-fill 과 auto-fit 의 차이는?

빈 트랙을 남기느냐(auto-fill) 늘려 채우느냐(auto-fit) 의 차이입니다. 아이템이 적을 때 결과가 달라집니다.

Q. 특정 아이템을 두 칸 차지하게 하려면?

그 아이템에 grid-column: span 2 를 주면 됩니다. 이 도구는 컨테이너 코드까지만 만들므로 자식 규칙은 직접 추가하세요.

Q. grid-template-areas 방식도 지원하나요?

아니요. 트랙 크기 기반(grid-template-columns/rows)만 다룹니다. 영역 이름으로 배치하려면 생성된 코드에 areas 선언을 덧붙이세요.