ToolPal

CSS 그리드 생성기

CSS 그리드 레이아웃을 시각적으로 설계하고 생성된 CSS 코드를 즉시 복사하세요.

컨테이너 속성

6 항목

미리보기

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

생성된 CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

사용 방법

CSS 그리드 레이아웃을 시각적으로 설계하고 생성된 CSS 코드를 즉시 복사하세요.

  1. 1repeat(3, 1fr) 같은 프리셋을 선택하거나 사용자 정의 값으로 grid-template-columns를 설정하세요.
  2. 2grid-template-rows와 gap을 구성하여 행 높이와 간격을 정의하세요.
  3. 3justify-items와 align-items를 조정하여 셀 내 항목 배치를 제어하세요.
  4. 4justify-content와 align-content로 컨테이너 내 전체 그리드 위치를 설정하세요.
  5. 5항목을 추가하거나 제거하여 다양한 레이아웃을 미리보고 생성된 CSS를 복사하세요.

주요 기능

  • 열/행 프리셋과 사용자 입력 — 일반적인 그리드 패턴 또는 유효한 CSS 값 직접 입력
  • 실시간 시각적 미리보기 — 속성을 변경하는 즉시 그리드 모양 확인
  • 완전한 정렬 제어 — justify-items, align-items, justify-content, align-content 설정
  • 원클릭 CSS 복사 — 7가지 그리드 속성이 포함된 깔끔한 CSS 즉시 복사

자주 묻는 질문

더 알아보기