🎨

CSS Grid Generator

css · grid · layout · generator · columns

열행열 간격행 간격grid-template-columnsgrid-template-rows

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  column-gap: 16px;
  row-gap: 16px;
}

사용 방법

1
열·행 수와 간격을 설정하세요.
2
grid-template 값을 직접 조정할 수도 있어요.
3
생성된 CSS Grid 코드를 복사하세요.

FAQ

이 도구는 무료인가요?

네, 가입 없이, 설치 할 필요도 없이 완전 무료로 바로 사용할 수 있습니다.

이 도구는 어떤 도구인가요?

CSS 그리드 레이아웃을 시각적으로 생성 — 열/행 수, 간격, 템플릿 값을 실시간 그리드 미리보기로 설정 회원가입이나 설치 없이, 페이지만 열면 바로 무료로 사용할 수 있어요.